Question

我编写了一个基于凹坑的气泡图，对于某些z值，它会移除气泡并绘制一个大的红色X，这是一个由行插值创建的svg路径，如下所示：

var points = [{"x":x-edgeSize,"y":y+edgeSize},
                          {"x":x,"y":y},
                          {"x":x+edgeSize,"y":y-edgeSize},
                          {"x":x,"y":y},
                          {"x":x-edgeSize,"y":y-edgeSize},
                          {"x":x,"y":y},
                          {"x":x+edgeSize,"y":y+edgeSize},
                          {"x":x,"y":y}];
var lineFunction = d3.svg.line()
                .x(function(d) { return d.x; })
                .y(function(d) { return d.y; })
                .interpolate("linear");
var path = graphSelection.append("path").attr("d",lineFunction(points))
                    .attr("stroke",color)
                    .attr("stroke-width",lineWidth);

现在，我希望它具有响应能力，并且我遵循了针对响应式图表的示例： Dimple - Responsive sizing现在所有的大小和界限都是％，我在调整大小时调用draw：

this.chart.draw(this.delay,true);

问题在于，红色X显然不会自行移动。

所以我尝试在调整大小时独立移动它，但我不知道正确的坐标，直到转换结束 - 这使它成为一个两步过渡。

将x-path添加到series.shapes会有帮助吗？它会跟其他气泡一起移动吗？

有没有标准的方法呢？

由于

凹坑 - 将自定义形状添加到响应式图表中

0 个答案: