d3js不进入行函数

Question

I would like to draw a line by d3 with below codes.( http://jsfiddle.net/totaljj/L9n7qnv1 ) 我想用以下代码在d3上画一条线。（ http://jsfiddle.net/totaljj/L9n7qnv1 ）

It draws x,y-axis, but does not enter into the line function when appending d attribute. 它绘制x，y轴，但在附加d属性时不进入线功能。

You can debug on line number 104 to see that the code does not enter into the line function. 您可以在第104行进行调试，以查看代码没有输入到行函数中。

Any help would be appreciated. 任何帮助，将不胜感激。

<!DOCTYPE html>
<html>
<style>
.axis--x path {
    display: none;
}

.line {
    fill: none;
    stroke: steelblue;
    stroke-width: 1.5px;
}
</style>

<body>
    <!-- Page Content -->

    <div>

            <svg width="430" height="250"></svg>
    </div>

    <section>

        <script src="https://d3js.org/d3.v4.min.js"></script>

        <script>

            var data=
            '{"recordsFiltered":5,"raCounts":[{"name":"comp_name","values":[{"date_":"2016","actual":170.0,"DT_RowId":"row_null"},{"date_":"2015","actual":198.0,"DT_RowId":"row_null"},{"date_":"2015","actual":149.0,"DT_RowId":"row_null"},{"date_":"2014","actual":197.0,"DT_RowId":"row_null"},{"date_":"2014","actual":146.0,"DT_RowId":"row_null"}],"DT_RowId":"row_null"}],"draw":null,"recordsTotal":5}';

            var d = JSON.parse(data);
            draw(d.raCounts);

            function draw(data){

                //svg
                var svg = d3.select("svg"),
                    margin = {top: 100, right: 80, bottom: 30, left: 50},
                    width = svg.attr("width") - margin.left - margin.right,
                    height = svg.attr("height") - margin.top - margin.bottom,
                    g = svg.append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")");


                //time
                var parseTime = d3.timeParse("%Y%m%d");

                //domain
//              var x = d3.scaleTime().range([0, width]),
                var x = d3.scaleLinear().range([0, width]),
                    y = d3.scaleLinear().range([height, 0]),
                    z = d3.scaleOrdinal(d3.schemeCategory10);

                //line
                var line = d3.line()
                    .curve(d3.curveBasis)
                    .x(function(d) { 
                        return x(d.date_); })
                    .y(function(d) { 
                        return y(d.actual); });

                  //domain
                  x.domain(d3.extent(data[0].values, function(d) { 
                      return d.date_; }));

                  y.domain([
                    d3.min(data, function(c) { 
                        return d3.min(c.values, function(d) {
                            return d.actual; }); }),
                    d3.max(data, function(c) { 
                        return d3.max(c.values, function(d) {
                            return d.actual; }); })
                  ]);

                  z.domain(data.map(function(c) { 
                      return c.DT_RowId; }));

                  //axis
                  g.append("g")
                      .attr("class", "axis axis--x")
                      .attr("transform", "translate(0," + height + ")")
                      .call(d3.axisBottom(x));

                  g.append("g")
                      .attr("class", "axis axis--y")
                      .call(d3.axisLeft(y))
                    .append("text")
                      .attr("transform", "rotate(-90)")
                      .attr("y", 6)
                      .attr("dy", "0.71em")
                      .attr("fill", "#000")
                      .text("count");

                  var ra = g.selectAll(".ra")
                    .data(data)
                    .enter().append("g")
                      .attr("class", "ra");

                 //ra line
                  ra.append("path")
                      .attr("class", "line")
                      .attr("d",
                              function(d) { return 
                                  line(d.values); })
                      .style("stroke-dasharray", ("1","1"));
            }


            </script>
    </section>

</body>
</html>

Answer 1

JavaScript doesn't always require semicolons at the end of a line. JavaScript并非总是在行尾使用分号。 It will automatically insert them in certain situations , and the place where you call your line function is one of them: 在某些情况下，它将自动插入它们，而您调用line函数的位置就是其中之一：

                  .attr("d",
                          function(d) { return 
                              line(d.values); })

The fix is therefore to remove the newline after return : 因此，解决方法是在return后删除换行符：

                  .attr("d",
                          function(d) { return line(d.values); })

Answer 2

I think both Gerardo Furtado's answer as well as Luke Woodward's answer have good points, but both circumvent the fact, that OP's solution is somewhat off the beaten track. 我认为Gerardo Furtado的答案和Luke Woodward的答案都很好，但是两者都绕开了OP的解决方案有些偏离的事实。 To make full use of the data binding the typical approach would be something like the following: 为了充分利用数据绑定，典型方法如下所示：

//ra line
ra.selectAll("path.line")
  .data(function(d) { return [d.values]; })
  .enter().append("path")
    .attr("class", "line")
    .attr("d", line)

Passing just the line generator function get rids of the automatical semicolon insertion after the return statement. 仅通过line生成器函数可以在return语句后摆脱自动分号插入的麻烦。 On the other hand, doing the data binding for the path.line element still allows for multiple lines drawn by the same statement. 另一方面，对path.line元素进行数据绑定仍然允许同一条语句绘制多条线。

Have a look at the following snippet for a working example: 请看以下示例片段：

  var data = '{"recordsFiltered":5,"raCounts":[{"name":"comp_name","values":[{"date_":"2016","actual":170.0,"DT_RowId":"row_null"},{"date_":"2015","actual":198.0,"DT_RowId":"row_null"},{"date_":"2015","actual":149.0,"DT_RowId":"row_null"},{"date_":"2014","actual":197.0,"DT_RowId":"row_null"},{"date_":"2014","actual":146.0,"DT_RowId":"row_null"}],"DT_RowId":"row_null"}],"draw":null,"recordsTotal":5}'; data = JSON.parse(data).raCounts; //svg var svg = d3.select("svg"), margin = { top: 100, right: 80, bottom: 30, left: 50 }, width = svg.attr("width") - margin.left - margin.right, height = svg.attr("height") - margin.top - margin.bottom, g = svg.append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")"); //time var parseTime = d3.timeParse("%Y%m%d"); //domain // var x = d3.scaleTime().range([0, width]), var x = d3.scaleLinear().range([0, width]), y = d3.scaleLinear().range([height, 0]), z = d3.scaleOrdinal(d3.schemeCategory10); //line var line = d3.line() .curve(d3.curveBasis) .x(function(d) { return x(d.date_); }) .y(function(d) { return y(d.actual); }); //domain x.domain(d3.extent(data[0].values, function(d) { return d.date_; })); y.domain([ d3.min(data, function(c) { return d3.min(c.values, function(d) { return d.actual; }); }), d3.max(data, function(c) { return d3.max(c.values, function(d) { return d.actual; }); }) ]); z.domain(data.map(function(c) { return c.DT_RowId; })); //axis g.append("g") .attr("class", "axis axis--x") .attr("transform", "translate(0," + height + ")") .call(d3.axisBottom(x)); g.append("g") .attr("class", "axis axis--y") .call(d3.axisLeft(y)) .append("text") .attr("transform", "rotate(-90)") .attr("y", 6) .attr("dy", "0.71em") .attr("fill", "#000") .text("count"); var ra = g.selectAll(".ra") .data(data) .enter().append("g") .attr("class", "ra"); //ra line ra.selectAll("path.line") .data(function(d) { return [d.values]; }) .enter().append("path") .attr("class", "line") .attr("d", line) .style("stroke-dasharray", ("1", "1"));

 <style> .axis--x path { display: none; } .line { fill: none; stroke: steelblue; stroke-width: 1.5px; } </style>

 <script src="https://d3js.org/d3.v4.js"></script> <svg width="430" height="250"> </svg>

Answer 3

You're not passing the correct data to your line generator. 您没有将正确的数据传递给线路生成器。 It should be: 它应该是：

ra.append("path")
    .attr("class", "line")
    .attr("d", line(data[0].values))
    .style("stroke-dasharray", ("1", "1"));

Here is your updated fiddle: http://jsfiddle.net/67zs8ph7/ 这是您更新的小提琴： http : //jsfiddle.net/67zs8ph7/

PS : this will plot just one line (see comment below) PS ：这只会画一条线（请参阅下面的评论）

d3js不进入行函数

问题描述

3 个解决方案

解决方案1
3 已采纳 2017-01-02 10:13:11

解决方案2
3 2017-01-02 10:50:53

解决方案3
0 2017-01-02 10:17:15

d3js不进入行函数

问题描述

3 个解决方案

解决方案1 3 已采纳 2017-01-02 10:13:11

解决方案2 3 2017-01-02 10:50:53

解决方案3 0 2017-01-02 10:17:15

解决方案1
3 已采纳 2017-01-02 10:13:11

解决方案2
3 2017-01-02 10:50:53

解决方案3
0 2017-01-02 10:17:15