Question

我有一组定义为

的圈子

 nodes = [{
    x: xRange(xvalue),
    y: yRange(getY(xvalue)),
    ... 
}]

vis.selectAll(".nodes")
    .data(nodes)
 .enter().append("circle")
 .attr("class", "nodes")
 .attr("cx", function (d) {
    return d.x;
})
.attr("cy", function (d) {
    return d.y;
})
.attr("r", "7px")
.attr("fill", "black")
.attr("transform", function (p) {
    return "translate(" + p.x + "," + p.y + ")";
})

我试图将点的坐标保持为“像素”单位而不是“轴”单位。唯一的问题是我的点不会显示，除非出于某种原因它们处于“轴”单位。以下是用于说明这一点的测试用例：

Pixel Units

Axis Units

在这两种情况下，我都在第一象限中包含了一个测试点，它使用了“像素”单位。有没有理由为什么测试点可以使用像素，但其他人不能？

Answer 1

对于我的圈子，我使用语句

.attr("transform", function (p) {
        return "translate(" + p.x + "," + p.y + ")";
    })

这很麻烦，因为它会导致点基于轴单位进行平移。将此更改为

.attr("transform", function (p) {
        return "translate(" + xRange.invert(p.x) + "," + yRange.invert(p.y) + ")";
    })

翻译将正确获取像素单位并绘制图形。

Proof

为什么我的圈子不会以“像素”单位显示？

1 个答案: