Question

我想用d3用下面的代码画一条线。（http://jsfiddle.net/totaljj/L9n7qnv1）

它绘制x，y轴，但在附加d属性时不会进入线函数。

您可以在第104行调试，看看代码没有进入行功能。

任何帮助都将不胜感激。

<!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并不总是需要在行尾添加分号。 It will automatically insert them in certain situations，以及您调用line函数的地方就是其中之一：

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

因此，修复是在return之后删除换行符：

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

Answer 2

我认为Gerardo Furtado的answer以及Luke Woodward的answer都有优点，但两者都避开了OP的解决方案人迹罕至的地方。为了充分利用数据绑定，典型的方法如下：

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

仅传递line生成器函数，在return语句后获取自动分号插入的rids。另一方面，对path.line元素进行数据绑定仍然允许由同一语句绘制多行。

请查看以下代码段以获取工作示例：

＆＃13;

		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"));

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 3

您没有将正确的数据传递给线路生成器。它应该是：

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

这是您更新的小提琴：http://jsfiddle.net/67zs8ph7/

PS ：这将只绘制一个行（请参阅下面的评论）

d3js不进入行功能

3 个答案: