javascript - How to center rectangles on position in D3.js? - Stack Overflow

admin管理员组

文章数量:1410705

I have a graph where I have both circles and rectangles along the ticks of my x-axis. I'd like to be able to center all elements on the ticks of the x-axis. Circles are automatically placed in the center and scaled with a radius attribute, but with rectangles, I am not able to move it as I am using an ordinal scale to create my x-axis values.

This is how much graph looks like: .png

It can be seen that the squares upper-left corner is the position I want to be it's center.

My code for the x-axis looks like the following:

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; }));

How can i center a figure like the square in a certain position? In this case, on a specific area of the x-axis?

EDIT

Added SVG code for square:

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");

I have a graph where I have both circles and rectangles along the ticks of my x-axis. I'd like to be able to center all elements on the ticks of the x-axis. Circles are automatically placed in the center and scaled with a radius attribute, but with rectangles, I am not able to move it as I am using an ordinal scale to create my x-axis values.

This is how much graph looks like: http://puu.sh/gmCkZ/37ab176161.png

It can be seen that the squares upper-left corner is the position I want to be it's center.

My code for the x-axis looks like the following:

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; }));

How can i center a figure like the square in a certain position? In this case, on a specific area of the x-axis?

EDIT

Added SVG code for square:

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");

• javascript
• html
• css
• d3.js

Share Improve this question Follow edited Mar 4, 2015 at 22:52 Sina Sohi asked Mar 4, 2015 at 22:29 Sina SohiSina Sohi 2,77999 gold badges3636 silver badges5151 bronze badges 7

• Are you able to add a class to the squares, or no? – plushyObject Commented Mar 4, 2015 at 22:32
• Yes I can add a class to the square. Why? – Sina Sohi Commented Mar 4, 2015 at 22:35
• I assume you add your <rect> element somewhere in the DOM where you had a translation. You can check and pare if the <circle> elements and the <rect> elements you append differ in 1) either the selection where they are appended to or 2) the setting of your x attribute (and cx attribute of the <circle>...e.g. .attr("x", function(d) { return x(d.name); })... – ee2Dev Commented Mar 4, 2015 at 22:48
• can you show the code where you append the rect and (add the selection in case it's a variable)? – ee2Dev Commented Mar 4, 2015 at 22:50
• @ee2Dev Yes of course I added it now. I'm not sure I understand your other ment however :( – Sina Sohi Commented Mar 4, 2015 at 22:53

 |  Show 2 more ments

2 Answers 2

Sorted by: Reset to default 4

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

If the square is 50px wide, and you have a class called .square:

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

Just move it over half. See if that works.

Here is a fiddle to show you what I mean.

http://jsfiddle/plushyObject/hkwwxq9j/

本文标签： javascriptHow to center rectangles on position in D3jsStack Overflow