Question

我已设法使用WordPress自定义字段在模板中创建一组字段，当它处于编辑模式时。我已经研究了如何使用JavaScript访问这些值，并且我已经使用JavaScript部分更新了此模板的PHP，以便从表单数据创建全局变量。在这种风格： var project_name = '<?php the_field('project_name'); ?>'; 我已经尝试将php调用直接放入d3脚本中，但没有成功。

我也有wp-d3插件。我已经放了一个测试脚本，它在原位工作，但我看不出我应该如何利用全局变量来驱动d3.js.在这个测试用例中，我只是尝试使用存储在全局变量中的值来设置三个圆的颜色。

在我的脚本部分之前插入SVG可能很重要，包含变量声明？

这是php脚本

<?php
/*
Template Name: Project Status
*/
if ( apply_filters( 'czr_four_do', false ) ) {
  do_action( 'czr_four_template' );
  return;
}
?>
<?php do_action( '__before_main_wrapper' ); ##hook of the header with get_header ?>
<div id="main-wrapper" class="<?php echo implode(' ', apply_filters( 'tc_main_wrapper_classes' , array('container') ) ) ?>">

    <?php do_action( '__before_main_container' ); ##hook of the featured page (priority 10) and breadcrumb (priority 20)...and whatever you need! ?>

    <div class="container" role="main">
        <div class="<?php echo implode(' ', apply_filters( 'tc_column_content_wrapper_classes' , array('row' ,'column-content-wrapper') ) ) ?>">

            <?php do_action( '__before_article_container' ); ##hook of left sidebar?>

                <div id="content" class="<?php echo implode(' ', apply_filters( 'tc_article_container_class' , array( CZR_utils::czr_fn_get_layout(  CZR_utils::czr_fn_id() , 'class' ) , 'article-container' ) ) ) ?>">

                    <?php do_action( '__before_loop' );##hooks the header of the list of post : archive, search... ?>

                        <?php if ( have_posts() ) : ?>

                            <?php while ( have_posts() ) : ##all other cases for single and lists: post, custom post type, page, archives, search, 404 ?>

                                <?php the_post(); ?>

                                <?php do_action( '__before_article' ) ?>

                                    <article <?php czr_fn__f( '__article_selectors' ) ?>>
                                        <?php do_action( '__loop' ); ?>
                                        <script type="text/javascript">
                                                var project_colour = '<?php the_field('project_colour'); ?>';
                                                var project_name = '<?php the_field('project_name'); ?>';
                                                var project_type = '<?php the_field('project_type'); ?>';
                                                var executive_owner = '<?php the_field('executive_owner'); ?>';
                                                var director = '<?php the_field('director'); ?>';
                                                var key_wins = '<?php the_field('key_wins'); ?>';
                                                var initiatives = '<?php the_field('initiatives'); ?>';
                                                var whats_new = '<?php the_field('whats_new'); ?>';
                                                var red_flags = '<?php the_field('red_flags'); ?>';
                                                var design_thinking_score = '<?php the_field('design_thinking_score'); ?>';
                                        </script>
                                    </article>
                                <?php do_action( '__after_article' ) ?>

                            <?php endwhile; ?>

                        <?php endif; ##end if have posts ?>

                    <?php do_action( '__after_loop' );##hook of the comments and the posts navigation with priorities 10 and 20 ?>

                </div><!--.article-container -->

           <?php do_action( '__after_article_container' ); ##hook of left sidebar ?>

        </div><!--.row -->
    </div><!-- .container role: main -->

    <?php do_action( '__after_main_container' ); ?>

</div><!-- //#main-wrapper -->

<?php do_action( '__after_main_wrapper' );##hook of the footer with get_get_footer ?>

这是wp-d3代码

var jsonCircles = [
  { "x-axis": 130, "y_axis": 50, "radius": 20, "color" : "green" },
  { "x_axis": 170, "y_axis": 170, "radius": 30, "color" : "purple"},
  { "x_axis": 310, "y_axis": 310, "radius": 50, "color" : "red"}];

var svgContainer = d3.select(".wpd3-1494-0").append("svg")
                                    .attr("width", 600)
                                    .attr("height", 400);

var circles = svgContainer.selectAll("circle")
                          .data(jsonCircles)
                          .enter()
                          .append("circle");

var circleAttributes = circles
                       .attr("cx", function (d) { return d.x_axis; })
                       .attr("cy", function (d) { return d.y_axis; })
                       .attr("r", function (d) { return d.radius; })
                       .style("fill", project_colour);

请注意，在最后一行，我试图捕获包含颜色值的全局变量，但这不起作用。使用开发工具，我可以看到生成的代码看起来像这样

<div class="wpd3-1494-0"><script type="text/javascript">function wpd3_1494_0 () {var jsonCircles = [
  { "x-axis": 130, "y_axis": 50, "radius": 20, "color" : "green" },
  { "x_axis": 170, "y_axis": 170, "radius": 30, "color" : "purple"},
  { "x_axis": 310, "y_axis": 310, "radius": 50, "color" : "red"}];
var svgContainer = d3.select(".wpd3-1494-0").append("svg")
                                    .attr("width", 600)
                                    .attr("height", 400);
var circles = svgContainer.selectAll("circle")
                          .data(jsonCircles)
                          .enter()
                          .append("circle");
var circleAttributes = circles
                       .attr("cx", function (d) { return d.x_axis; })
                       .attr("cy", function (d) { return d.y_axis; })
                       .attr("r", function (d) { return d.radius; })
                       .style("fill", project_colour);}; wpd3_1494_0();</script></div><p>&nbsp;</p>
        </div>

                            <script type="text/javascript">
                        var project_colour = '#9ad66f';
                        etc...

错误消息为ReferenceError: project_colour is not defined

WordPress javascript变量范围

0 个答案: