Question

我有一个图表，我的x轴的刻度上有圆圈和矩形。我希望能够将所有元素集中在x轴的刻度上。圆圈自动放置在中心并使用radius属性进行缩放，但是使用矩形，我无法移动它，因为我使用序数比例来创建我的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轴的特定区域？

修改

为square添加了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

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)
    ...

Answer 2

如果正方形是50px宽，并且你有一个名为.square的类：

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

将它移动一半以上。看看是否有效。

这是一个小提示，告诉你我的意思。

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

如何在D3.js中将矩形置于中心位置？

2 个答案: