如何在响应式图表中正确调整 voronoi 的大小
How to properly resize voronoi in a reponsive chart
我有一个用 d3 制作的响应式折线图,但在调整用于悬停状态的 voronoi 的大小时遇到问题。我怀疑我没有以正确的方式提及它...
我在这里添加了 voronoi:
var voronoiGroup = svg.append("g")
.attr("class", "voronoi");
voronoiGroup.selectAll("line")
.data(voronoi(d3.nest()
.key(function(d) { return xScale(d.date) + "," + yScale(d.value); })
.rollup(function(v) { return v[0]; })
.entries(d3.merge(ranksFiltered.map(function(d) { return d.values;})))
.map(function(d) { return d.values; })))
.enter()
.append("path")
.attr("id", "cells")
.attr("d", function(d) { return "M" + d.join("L") + "Z"; })
.datum(function(d) { return d.point; });
在我的调整大小函数中,我尝试重新绘制它:
svg.select("#cells path")
.attr("d", function(d) { return "M" + d.join("L") + "Z"; })
.datum(function(d) { return d.point; });;
如果有人想尝试一下,这里有一个小插曲:
http://plnkr.co/edit/Jj4QpF1bqK901WalNMmR
谢谢你的时间!
Voronoi Geom 正在计算与 clipExtent 相关的像素位置。由于您正在更改宽度(剪辑范围),因此您需要重新运行计算。这是 d3
的少数情况之一,我建议您只删除您的 voronoi 组下的路径并重新添加它们:
voronoi.clipExtent([[0, -10], [width+10, height]]);
voronoiGroup.selectAll("path").remove();
voronoiGroup.selectAll("cells")
.data(voronoi(vd))
.enter()
.append("path")
.attr("class", "cells")
.attr("d", function(d) { return "M" + d.join("L") + "Z"; })
.datum(function(d) { return d.point; })
.attr("stroke", "red")
.on("mouseover", mouseover)
.on("mouseout", mouseout);
已更新 plunker。
我有一个用 d3 制作的响应式折线图,但在调整用于悬停状态的 voronoi 的大小时遇到问题。我怀疑我没有以正确的方式提及它...
我在这里添加了 voronoi:
var voronoiGroup = svg.append("g")
.attr("class", "voronoi");
voronoiGroup.selectAll("line")
.data(voronoi(d3.nest()
.key(function(d) { return xScale(d.date) + "," + yScale(d.value); })
.rollup(function(v) { return v[0]; })
.entries(d3.merge(ranksFiltered.map(function(d) { return d.values;})))
.map(function(d) { return d.values; })))
.enter()
.append("path")
.attr("id", "cells")
.attr("d", function(d) { return "M" + d.join("L") + "Z"; })
.datum(function(d) { return d.point; });
在我的调整大小函数中,我尝试重新绘制它:
svg.select("#cells path")
.attr("d", function(d) { return "M" + d.join("L") + "Z"; })
.datum(function(d) { return d.point; });;
如果有人想尝试一下,这里有一个小插曲:
http://plnkr.co/edit/Jj4QpF1bqK901WalNMmR
谢谢你的时间!
Voronoi Geom 正在计算与 clipExtent 相关的像素位置。由于您正在更改宽度(剪辑范围),因此您需要重新运行计算。这是 d3
的少数情况之一,我建议您只删除您的 voronoi 组下的路径并重新添加它们:
voronoi.clipExtent([[0, -10], [width+10, height]]);
voronoiGroup.selectAll("path").remove();
voronoiGroup.selectAll("cells")
.data(voronoi(vd))
.enter()
.append("path")
.attr("class", "cells")
.attr("d", function(d) { return "M" + d.join("L") + "Z"; })
.datum(function(d) { return d.point; })
.attr("stroke", "red")
.on("mouseover", mouseover)
.on("mouseout", mouseout);
已更新 plunker。