在Topojson区域内的描边渲染。如何改变整个造型的风格?

时间:2014-11-03 20:22:00

标签: d3.js stroke topojson

我在更改Topojson文件中单个元素的笔划时遇到问题,我的鼠标悬停不会改变整个形状的笔触。

视觉效果可能最好:

enter image description here

我希望来自县形状区域的每个边界元素在鼠标悬停时接收相同的笔划。相反,我得到这种奇怪的效果,只有部分边界改变了中风。

2 个答案:

答案 0 :(得分:2)

我最终使用了这样的解决方案referenced here.

.on("mouseover", function(d,i) {
    d3.select(this.parentNode.appendChild(this)).transition().duration(300)
        .style({'stroke-opacity':1,'stroke':'#F00'});
})

答案 1 :(得分:1)

假设所有绘制的形状都在一个名为shapes的数据绑定d3选择中(您使用通常的输入,更新,退出流创建)。那么这样的事情应该有效:

shapes.on('mouseover', function(d, i) {
  // d is the datum of the hovered shape

  // data is all the data currently bound to shapes
  var data = shapes.data();

  // this'll sort the data such that the hovered d is last in the array
  data.sort(function(a,b) { return d3.ascending(a == d, b == d); })

  // now that the data is sorted, reorder the shapes to match
  // the order within data.
  shapes.data(data);// NOTE: there's a good chance this line is not necessary. Try taking it out.
  shapes.order();
});