如何将矩形居中放置在 D3.js 中的位置？

Question

我有一个图表，其中沿着 x 轴的刻度线有圆形和矩形。我希望能够将所有元素集中在 x 轴的刻度上。圆会自动放置在中心并使用半径属性进行缩放，但是对于矩形，我无法移动它，因为我正在使用序数比例来创建我的 x 轴值。

这是图表的样子：http://puu.sh/gmCkZ/37ab176161.png

可以看到，左上角的方块就是我想居中的位置

我的 x 轴代码如下所示：

var x = d3.scale.ordinal()
    .rangeRoundBands([0, width], 1);

var xAxis = d3.svg.axis()
    .scale(x)
    .orient("bottom");

d3.tsv("data.tsv", type, function(error, data) {
    x.domain(data.map(function(d) { return d.name; }));

如何使正方形之类的图形居中于某个位置？在这种情况下，在x轴的特定区域？

编辑

为正方形添加了 SVG 代码：

var square = svgbody
        .selectAll("nodes.rect")
        .data(["B", "L"]);

    square.exit()
        .style("opacity", 1)
        .transition()
        .duration(500)
        .style("opacity", 0)
        .remove();

    square.enter()
        .append("rect")
        .attr("class", "squareNodes");

    square
        .attr("x", function(d){ return x(d);})
        .attr("y", function(d){return y(statusText);} )
        .attr("width",19)
        .attr("height",19)
        .attr("rx", "3")
        .attr("ry", "3" )
        .style('opacity', NODE_OPACITY)
        .style('fill', "green");

Answer 1

如果正方形的宽度为 50px，并且您有一个名为 .square 的 class：

.square{
   position: relative;
   right: 25px;
}

把它移到一半。看看是否可行。

这里 fiddle 向您展示我的意思。

http://jsfiddle.net/plushyObject/hkwwxq9j/

Answer 2

squareSize = 19;
square
    .attr("x", function(d){ return x(d) - squareSize/2;})
    .attr("y", function(d){return y(statusText) - squareSize/2;} )
    .attr("width",squareSize)
    .attr("height",squareSize)
    ...

如何将矩形居中放置在 D3.js 中的位置？

How to center rectangles on position in D3.js?

html

javascript

css

d3.js