Question

对于JS和D3j来说都是新手。我试图在地图上创建一个单圈，通过我的数据转换（大小增加然后减少）。但是，从该示例中，将4个元素添加到svg中。并且每个的大小同时变化。但是，我想创建一个单圈而不是使用count字段的过渡。链接到我当前的块： https://bl.ocks.org/shannondussoye/e8feaa2cf22f7e6a7d12582b923d999f

由于

Answer 1

如果您执行console.log(data.features.length)，则会得到结果4。这意味着data.features有4个数组，当然，您的输入选择将有4个圆圈。

由于这些阵列似乎具有相同的地理位置（所有这些阵列都指向市政厅并且具有相同的坐标，即"151.2062183,-33.8732664"），因此只使用其中一个。例如，第一个数组：

var circle = svg.append("circle")
    .datum(data.features[0]);

对于第一个元素，它只会附加一个圆圈。

以下是您更新的bl.ocks：https://bl.ocks.org/anonymous/7e930937a6d8c0a24c6ca3a033a7cf84/f176a662d4ccd4d33b56101a17e93e6a7e0ef724

Answer 2

您的代码在这里：

var circle = svg.selectAll("circle")
  .data(data.features)
  .enter()
  .append("circle");

将为数组data.features中的每个项目附加一个圆圈（假设不存在任何圆圈）。由于阵列中有四个项目，因此您将拥有四个圆圈。如果您只想附加一个圆，请将输入数据数组更改为一个要素的数组：

.data([data.features[0]]).enter().append()...

然后，您可以在初始追加后更新该数据，以便转换为新功能：

.data([data.features[i]])
  .attr("attr to be updated",...)

以下示例将此方法应用于非地理设置：附加一个功能， 2.使用数组中下一项的属性更新要素， 3.重复：

＆＃13;

var svg = d3.select("body")
  .append("svg")
  .attr("width",400)
  .attr("height",400);
  
var data = [{x:100,y:100,r:10},{x:200,y:100,r:30},{x:200,y:200,r:10},{y:200,x:100,r:25}];

var circle = svg.selectAll("circle")
  .data([data[0]])
  .enter()
  .append("circle")
  .attr("cx",function(d) { return d.x; })
  .attr("cy",function(d) { return d.y; })
  .attr("r",function(d) { return d.r; });
  
var i = 0;

transition();
  
function transition() {
  circle.data([data[++i%4]])  // get the next item in the data array, assign that datum to the feature
    .transition() 
    .attr("cx",function(d) { return d.x; }) // update the properties of the feature
    .attr("cy",function(d) { return d.y; })
    .attr("r", function(d) { return d.r; })
    .each("end",transition)  // loop
    .duration(2000)
}

＆＃13;

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

＆＃13;

这是您使用该方法的map（代码更改最少 - 但遗憾的是我更改了json文件名）

D3从geojson中抽取单个元素

2 个答案: