Question

我使用d3构建连接。代码显示了数据和连接方法：

var places = {
TYO: [139.76, 35.68],
BKK: [100.48, 13.75],
BER: [13.40, 52.52],
NYC: [-74.00, 40.71],
};
var connections = {
CONN1: [places.TYO, places.BKK],
CONN2: [places.BER, places.NYC],
};
...
svg.append("path")
   .datum({type: "LineString", coordinates: connections.CONN1})
   .attr("class", "route")
   .attr("d", path);
svg.append("path")
   .datum({type: "LineString", coordinates: connections.CONN2})
   .attr("class", "route")
   .attr("d", path);

您可以看到我的代码，我使用两种相同的方法来构建两个连接。建立更多连接并不好。

我想知道，如果有一个循环函数来解释连接，可以使用数据＆＃34; connections＆＃34;直？我的意思是，我可以获得有关数据和连接的信息。并直接使用它们来建立联系。

我想过一些方法，比如.datum({type: "LineString", function(d,i) { return coordinates: connections[i];});。但它不起作用。

你可以告诉我一些方法来解决它吗？感谢。

Answer 1

通常，当您想要在d3中追加许多功能时，您希望使用数组而不是对象。使用数组，您可以使用d3输入选择，这将允许您根据需要构建任意数量的功能（如果粘贴到对象，请注意connections[0]不是您要查找的内容，connections["conn1"]是）。

相反，请使用如下数据结构：

var connections = [
[places.TYO, places.NYC],
[places.BKK, places.BER],
...
]

如果每个数据点必须具有识别或其他属性，请使用以下内容：

var connections = [
{points:[places.TYO, places.NYC],id: 1,...},
{points:[places.BKK, places.BER],id: 2,...},
...
]

对于这些设置，您可以按如下方式构建线条：

paths = svg.selectAll(".connection")
    .data(connections)
    .enter()
    .append("path")
    .attr("class","connection")
    .attr('d', function(d) {
        return path ({ 
           type:"LineString",
           coordinates:  d 
        });
    })

See here。或者：

paths = svg.selectAll(".connection")
    .data(connections)
    .enter()
    .append("path")
    .attr("class","connection")
    .attr('d', function(d) {
        return path ({ 
           type:"LineString",
           coordinates:  d.points 
        });
    })

或者，您可以使用如下数据设置：

var connections = [
{target:"TYO", source:"NYC"},
{target:"BKK", source: "BER"},
...
]

paths = svg.selectAll(".connection")
    .data(connections)
    .enter()
    .append("path")
    .attr("class","connection")
    .attr('d', function(d) {
        return path ({ 
           type:"LineString",
           coordinates: [ places[d.source],places[d.target] ]
        });
    })

See here

如果使用这些行选择尚不存在的元素

d3.select("...")
  .data(data)
  .enter()
  .append("path")

将为数据数组中的每个项附加path - 这意味着d3通常会避免使用for循环，因为所需的行为会直接进入d3本身。

d3.js使用循环函数

1 个答案: