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

Question

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

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

为了显示连接的条形，我使用 path 是有意义的。 https://jsfiddle.net/jaa07n6m/2/

$.ajax({
    type: 'get',
    url: '/public/index',
    dataType: 'script',
    data: data_send,
    success: function() {
        $('.skills_section').slick('reinit');
      }
});

但我没有以正确的方式实施它。

我想我需要让 lineFunction 追加两点。我的方法不起作用：

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

实施它的正确方法是什么？

Answer 1

策略

线函数并不关心有多少点，它期望一个点数组，它只是将它们连接起来。访问者功能应用于您提供的每个点 您需要一个比数据少一个成员的行集合，因此您需要绑定一些虚拟数据，然后您需要构造具有两个点的成员并将它们提供给行函数。

代码

＆＃13;

＆＃13;

	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 d.x; })
		.y(function (d) { return d.y; })
		.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");

＆＃13;

.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>

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;