如何使D3.js路径生成器附加两点？

Question

使用D3.js，我想创建一个具有水平线的图形，这些水平线由一条线连接。 请参见以下示例： http : //s15.postimg.org/7ffms1f7f/tmp.png

在一些教程的帮助下，我设法使用line显示了水平条。 jsfiddle.net / m2p1xky9 / 4 /

对于显示连接的条，使用path对我来说很有意义。 https://jsfiddle.net/jaa07n6m/2/

// Append Path:
   var lineFunction = d3.svg.line()
          .x(function(d) { return x(d.letter); })
          .y(function(d) { return y(d.frequency); })
          .interpolate("linear")

   var lineGraph = svg.append("path")
          .attr("d", lineFunction(data))
          .attr("stroke", "blue")
          .attr("stroke-width", 2)
          .attr("fill", "none");

但是我没有正确地实施它。

我想我需要使lineFunction追加两点。 我的方法行不通：

   var lineFunction = d3.svg.line()
          .x(function(d) { return x(d.letter); })
          .y(function(d) { return y(d.frequency); })
          .interpolate("linear")
          .x(function(d) { return x(d.letter)+x.rangeBand(); })
          .y(function(d) { return y(d.frequency); })
          .interpolate("linear");

什么是正确的实施方式？

Answer 1

战略

线函数不在乎有多少点，它需要一个点数组并将其全部连接在一起。 访问器功能适用于您输入的每个点。
您需要具有比数据少的成员的线集合，因此您需要绑定一些虚拟数据，然后需要构造具有两个点的成员并将其馈送到line函数。

码

  data = [ { letter: "A", frequency: .08167 }, { letter: "B", frequency: .01492 }, { letter: "C", frequency: .02782 }, { letter: "D", frequency: .04253 }, { letter: "E", frequency: .12702 } ]; var margin = { top: 20, right: 20, bottom: 30, left: 40 }, width = 960 - margin.left - margin.right, height = 500 - margin.top - margin.bottom; var x = d3.scale.ordinal() .rangeRoundBands([0, width], .1); var y = d3.scale.linear() .rangeRound([height, 0]); //Define X axis: var xAxis = d3.svg.axis() .scale(x) .orient("bottom"); //Define y axis: var yAxis = d3.svg.axis() .scale(y) .orient("left") .ticks(10, "%"); 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 + ")"); x.domain(data.map(function (d) { return d.letter; })); y.domain([0, d3.max(data, function (d) { return d.frequency; })]); // Append X-Axis: svg.append("g") .attr("class", "x axis") .attr("transform", "translate(0," + height + ")") .call(xAxis); // Append Y-Axis: svg.append("g") .attr("class", "y axis") .call(yAxis) // Append Lines: svg.selectAll(".line") .data(data) .enter() .append("line") .attr("class", "line") .attr("x1", function (d) { return x(d.letter); }) .attr("y1", function (d) { return y(d.frequency); }) .attr("x2", function (d) { return x(d.letter) + x.rangeBand(); }) .attr("y2", function (d) { return y(d.frequency); }) var lineFunction2 = d3.svg.line() .x(function (d) { return dx; }) .y(function (d) { return dy; }) .interpolate("linear") var lineGraph = svg.selectAll(".connect") .data(d3.range(data.length-1)) .enter().append("path") .attr("class", "connect") .attr("d", function(d, i) { var p1 = data[i], p2 = data[i+1]; return lineFunction2([ {x: x(p1.letter) + x.rangeBand(), y:y(p1.frequency)}, {x: x(p2.letter), y:y(p2.frequency)} ]) }) .attr("stroke", "blue") .attr("stroke-width", 2) .attr("fill", "none"); 

 .line { stroke: gray; stroke-width: 1; } .axis { font: 10px sans-serif; } .axis path, .axis line { fill: none; stroke: #000; shape-rendering: crispEdges; } .x.axis path { display: none; } </style> 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>