Question

我正在尝试使用d3构建一个代表美国每个县的geojson地图，然后在从服务器获取csv文件后动态更改形状的颜色。

每个县的形状都有一个唯一的标识符，在svg路径中被指定为属性，并嵌套在以下div格式中：<div id="map"><svg ...><path ...></path></svg></div>）：

<path class="county" cid="49003" d="M268.97942180906057,
180.25136249051877L267.99968608232916,179.94417907047466L266.73835706796865,
181.58920557665408L263.8700579925135,181.0924673795946L259.5224347320402,
185.30429000298852L255.0646299840323,185.9781064759694L237.98063840912738,
182.81739842586433L241.51437533212444,164.45244088140475L255.62126287079593,
166.99664084530673L266.95905635804127,169.0065343660998L268.07266792127234,
171.7741286687334L267.5663893622565,174.8022351145563L267.9956982687371,
178.0311646832157L268.89925024903414,178.0929836991428Z"></path>

我可以选择带有d3和打印属性值的元素到控制台，但我似乎无法添加或更改任何属性。

以下是我尝试使用的代码示例：

bar.forEach(function(d, i){
    d3.select('#map').select('.county[cid="' + d[1] + ']"').attr('foo', 'bar')
});

bar变量是脚本中先前加载的csv数据：

bar = data.map(function(d) { return [d["n"], d["i"], +d["t"]]; });

这似乎是一个简单而明显的解决方案，但无法弄清楚为什么这不起作用。谢谢你的帮助。

Answer 1

想出来。

关键部分是在选择器中放置引号：

原文：

d3.select('#map').select('.county[cid="' + d[1] + ']"').attr('foo', 'bar')

...变成（通过.attr附近的右括号注意双引号）：

d3.select('#map').select('.county[cid="' + d[1] + '"]').attr('foo', 'bar')

当我将它打印到console.log时，我不知道我是如何返回所选对象数组的。

无法使用d3绑定数据

1 个答案: