Question

我对D3 charts绝对陌生，并在我的WordPress网站上首次使用它。

plugin.php中的D3参考：

class Data_Visualizer {
   public function __construct(){
      add_action( 'wp_enqueue_scripts', array( &$this, 'evd_enqueue_assets' ) );
   }

   function evd_enqueue_assets() {
      // D3 chat script
      wp_enqueue_script( 'd3-chart', 'https://d3js.org/d3.v4.min.js' );
   }
}

new Essen_Data_Visualizer();

我编写了以下函数，该函数呈现绘制图表所需的JavaScript

public function evd_unitary_growth_plan_d3_chart( $data_str ) {
        ob_start(); ?>

        <script type="application/json" id="ddata">
            [
                {
                    "letter":"A",
                    "frequency":0.08167
                },
                {
                    "letter":"B",
                    "frequency":0.01492
                },
                {
                    "letter":"C",
                    "frequency":0.02780
                },
                {
                    "letter":"D",
                    "frequency":0.04253
                },
                {
                    "letter":"E",
                    "frequency":0.12702
                },
                {
                    "letter":"F",
                    "frequency":0.02288
                },
                {
                    "letter":"G",
                    "frequency":0.02022
                }
            ]
        </script>

        <script type="text/javascript">
            var margin = {top: 40, right: 20, bottom: 30, left: 40},
                width = 960 - margin.left - margin.right,
                height = 500 - margin.top - margin.bottom;

            var formatPercent = d3.format(".0%");

            var x = d3.scale.ordinal()
                .rangeRoundBands([0, width], .1);

            var y = d3.scale.linear()
                .range([height, 0]);

            var xAxis = d3.svg.axis()
                .scale(x)
                .orient("bottom");

            var yAxis = d3.svg.axis()
                .scale(y)
                .orient("left")
                .tickFormat(formatPercent);

            var tip = d3.tip()
                .attr('class', 'd3-tip')
                .offset([-10, 0])
                .html(function(d) {
                    return "<strong>Frequency:</strong> <span style='color:red'>" + d.frequency + "</span>";
                })

            var svg = d3.select("body").append("svg")
                .attr("width", width + margin.left + margin.right)
                .attr("height", height + margin.top + margin.bottom)
                .append("g")
                .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

            svg.call(tip);

            //var data = <?php echo $data_str; ?>
            var data = JSON.parse(document.getElementById('ddata').innerHTML);

            x.domain(data.map(function(d) { return d.letter; }));
            y.domain([0, d3.max(data, function(d) { return d.frequency; })]);

            svg.append("g")
                .attr("class", "x axis")
                .attr("transform", "translate(0," + height + ")")
                .call(xAxis);

            svg.append("g")
                .attr("class", "y axis")
                .call(yAxis)
                .append("text")
                .attr("transform", "rotate(-90)")
                .attr("y", 6)
                .attr("dy", ".71em")
                .style("text-anchor", "end")
                .text("Frequency");

            svg.selectAll(".bar")
                .data(data)
                .enter().append("rect")
                .attr("class", "bar")
                .attr("x", function(d) { return x(d.letter); })
                .attr("width", x.rangeBand())
                .attr("y", function(d) { return y(d.frequency); })
                .attr("height", function(d) { return height - y(d.frequency); })
                .on('mouseover', tip.show)
                .on('mouseout', tip.hide)

            function type(d) {
                d.frequency = +d.frequency;
                return d;
            }
        </script>

        <?php return ob_get_clean();
    }

上述功能是从另一个PHP文件中调用的，如下所示： echo $ dashboard_data-> evd_unitary_growth_plan_d3_chart（$ json_str）;

我正在创建$json_str（字符串），然后将其传递给上述函数。我的$ json_str看起来像这样：

[{"month": "Apr-19", "points": 3},{"month": "May-19", "points": 3},{"month": "Jun-19", "points": 5},{"month": "Jul-19", "points": 7},{"month": "Aug-19", "points": 6},{"month": "Sep-19", "points": 4},{"month": "Oct-19", "points": 23},{"month": "Nov-19", "points": 7},{"month": "Dec-19", "points": 7}]

但是为了测试，我没有使用这些数据。而是使用静态JSON来查看图表是否真正呈现。

我从http://jsfiddle.net/andrewpatt24/jo1bfbpu/复制了上面的代码，但是在运行页面时我得到了

未捕获的TypeError：无法读取未定义的属性“ ordinal”

我在做什么错了？

更新

我将D3参考从v4更改为v3（https://d3js.org/d3.v3.min.js），ordinal错误消失了。但是，我什至要摆脱代码中的所有tip甚至

wp_enqueue_script( 'd3-tip', 'http://labratrevenge.com/d3-tip/javascripts/d3.tip.v0.6.3.js' );

已引用

。

但即使在此之后，图表也完全无法显示。

<div class="chart-display-area" id="ecbg_unitary"></div>

var svg = d3.select("ecbg_unitary").append("svg")
                .attr("width", width + margin.left + margin.right)
                .attr("height", height + margin.top + margin.bottom)
                .append("g")
                .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

什么都没有呈现。当我将ecbg_unitary替换为body时，只有两个粗轴出现，没有别的。这是屏幕截图：

D3图表：未捕获的TypeError：无法读取未定义的属性“ ordinal”

0 个答案: