Question

我正在研究D3项目，我想知道如何通过读取JSON文档中的数据在两点之间绘制线条。文档提供了4个X和4个Ys值，我无法找到一种有效的方法，我尝试的所有内容都让我犯了错误（代码无法正常工作）。因为它是15000多行，我不可能逐个编写坐标，也不是创建动态程序/软件的方法。

提前致谢！

Answer 1

创建容器：

var svg = d3.select('#container').append('svg')
  .attr('width', 500)
  .attr('height', 500)

您的数据：

var thisData = {
    x1: 50,
    y1: 50,
    x2: 450,
    y2: 450
  };

使用上面的数据（或您自己的）创建您的链接：

var link = svg.selectAll(".link")
      .data([thisData]) //data above
    .enter().append("line")
      .attr("class", "link")
      .style('stroke','black')
      .style("stroke-width", function(d) { return Math.sqrt(d.value); });

定位链接：

  link.attr("x1", function(d) { console.log(d); return d.x1; })
        .attr("y1", function(d) { return d.y1; })
        .attr("x2", function(d) { return d.x2; })
        .attr("y2", function(d) { return d.y2; });

所有这些需求是两点，[X1,Y1] & [X2,Y2]或在您的情况下15000个链接。 D3会为你处理这一切：））

var svg = d3.select('#container').append('svg')
  .attr('width', 500)
  .attr('height', 500)
  //.append('g')
    
var thisData = {
    x1: 50,
    y1: 50,
    x2: 450,
    y2: 450
  };


 var link = svg.selectAll(".link")
      .data([thisData])
    .enter().append("line")
      .attr("class", "link")
      .style('stroke','black')
      .style("stroke-width", function(d) { return Math.sqrt(d.value); });
  //console.log(line);
  
  link.attr("x1", function(d) { console.log(d); return d.x1; })
        .attr("y1", function(d) { return d.y1; })
        .attr("x2", function(d) { return d.x2; })
        .attr("y2", function(d) { return d.y2; });

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

只要您的数据看起来像上面的数据或像这样的一组点：

var thisData = { //first line
    x1: 50,
    y1: 50,
    x2: 450,
    y2: 450
  },
  { //second
    x1: 50,
    y1: 50,
    x2: 450,
    y2: 450
  },
  {//third
    x1: 50,
    y1: 50,
    x2: 450,
    y2: 450
  };

编辑

以下是您展示数据的方式。

更新了小提琴：https://jsfiddle.net/reko91/odcyduvf/1/

我已将数据附加到变量 - 'thisData'。

现在只需绘制您想要将链接传递给D3的链接，如下所示：

.data(thisData.links)

我不知道为什么你有x1，x2，x3，x4。如果这是一个路径，例如，点将是x1，y1：x2，y2：x3，y3等等，那么您可能需要格式化代码，以便每个链接都有x1，y1，x2，y2。

我会显示你的所有数据，但JSFiddle无法处理135,000行数据：P

从JSON中绘制D3行读取

1 个答案: