Question

我目前正在研究一个使用2个序轴的非常基本的图形。 X轴显示4个类别，Y轴显示3.由于某种原因，绘制的圆圈不与绘制的轴对齐。在http://jsfiddle.net/SrdY6/可以看到一个例子。问题似乎与翻译有关，但其中唯一的翻译适用于包含<g>元素的大字：

var lunchgraph = svg.append("g")
    .attr("class", "lunchgraph")
    .attr("transform", "translate(" + lunchmargin.left + "," + lunchmargin.top + ")");

我已经看了一段时间了，但无法发现问题出在哪里......有更多见解的人？

Answer 1

没有什么比在那里提出问题并冒着公开的羞耻感，只是在发布后的几分钟内找到答案。

对于使用rangeBands或rangeRoundBands配置的序数轴，scale函数返回给定输入的较低值。要使绘图与确切的分类标签对齐，您需要将rangeBand的一半添加到计算的坐标。

所以：翻译或其他任何内容都没有问题，但计算cx和cy坐标可以将圆圈放在图表中。

正确的代码：

    .attr("cx", function(d) { return x(d.label) + x.rangeBand()/2 ;} )
    .attr("cy", function(d) { return y(d.sqid) + y.rangeBand()/2 ; } )

图〜轴对齐问题

1 个答案: