如何使用d3创建一个水平方向的连线生成器

以下是使用d3创建水平方向连线生成器的步骤：

创建SVG元素并设置其宽度和高度。

var svg = d3.select("body")
            .append("svg")
            .attr("width", 500)
            .attr("height", 200);

创建数据数组，并定义每个元素的起点和终点。

var data = [
  {x1: 50, y1: 100, x2: 200, y2: 100},
  {x1: 250, y1: 100, x2: 400, y2: 100}
];

创建连线生成器并设置其属性。

var lineGenerator = d3.line()
                       .x(function(d) { return d.x; })
                       .y(function(d) { return d.y; });

将起点和终点坐标添加到数据数组中。

data.forEach(function(d) {
  d.path = [
    {x: d.x1, y: d.y1},
    {x: d.x2, y: d.y2}
  ];
});

在SVG元素中添加路径元素，并设置其属性。

svg.selectAll("path")
   .data(data)
   .enter()
   .append("path")
   .attr("d", function(d) { return lineGenerator(d.path); })
   .attr("stroke", "black")
   .attr("stroke-width", 2)
   .attr("fill", "none");

运行代码并在浏览器中查看结果。

完整代码如下：

var svg = d3.select("body")
            .append("svg")
            .attr("width", 500)
            .attr("height", 200);

var data = [
  {x1: 50, y1: 100, x2: 200, y2: 100},
  {x1: 250, y1: 100, x2: 400, y2: 100}
];

var lineGenerator = d3.line()
                       .x(function(d) { return d.x; })
                       .y(function(d) { return d.y; });

data.forEach(function(d) {
  d.path = [
    {x: d.x1, y: d.y1},
    {x: d.x2, y: d.y2}
  ];
});

svg.selectAll("path")
   .data(data)
   .enter()
   .append("path")
   .attr("d", function(d) { return lineGenerator(d.path); })
   .attr("stroke", "black")
   .attr("stroke-width", 2)
   .attr("fill", "none");