D3 从 geojson 中绘制单个元素

Question

我对 JS 和 D3js 都很陌生。我正在尝试在地图上创建一个通过我的数据转换（大小增加然后减小）的圆圈。但是，从这个例子开始，4 个元素被添加到 svg 中。并且它们每个的大小同时变化。但是，我想创建一个圆而不是使用计数字段的转换。 Link 到我当前的区块： 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",...)

以下示例在非地理环境中应用此方法： 1.附加一个功能， 2. 使用数组中下一项的属性更新特征， 3. 重复：

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)
}

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

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

D3 从 geojson 中绘制单个元素

D3 draw single element from geojson

geojson

d3.js