D3新手在这里。我正在尝试在地图上定位路径元素。当我将鼠标悬停在图例上时,我希望突出显示地图上的相应数据。 像这样。 https://vida.io/documents/jspBB83bm6EvEYE3n
这是我到目前为止所拥有的 http://bricbracs.com/map/
我已设法在鼠标悬停时定位图例中的单元格。以下是legend.js代码中的相关代码。
.on("mouseover", function(d,i) {
var chosen = d.color;
console.log(chosen)
d3.select(this).style("fill", "blue");
})
以下是脚本中的相关代码。
d3.csv("expenses.csv", function(data) {
data = data.filter(function(d) { return d.year == 2014 });
data.forEach(function(d) {
d.value = +d.value;
});
color.domain([
d3.min(data, function(d) { return d.value; }),
d3.max(data, function(d) { return d.value })
]);
d3.json("us-states.json", function(json) {
for (var i = 0; i < data.length; i++) {
var dataState = data[i].state;
var dataValue = parseFloat(data[i].value);
for (j = 0; j < json.features.length; j++) {
jsonState = json.features[j].properties.name;
if (dataState == jsonState) {
json.features[j].properties.value = dataValue;
break;
}
}
}
svg.selectAll("path")
.data(json.features)
.enter()
.append("path")
.attr("d", path)
.style("stroke","#ccc")
.style("fill", function(d) {
value = d.properties.value;
if (value) {
return color(d.properties.value)
} else {
return "#000"
}
})
});
实现这一目标的最佳方法是什么。提前谢谢。