0

I want to draw a rectangle for each data point, and also draw a dot on the center of each rectangle if certain value is true. Although I can draw another set of dots trivial way. But I want to access some attribute (e.g., x, y) of the (parent) rectangles while drawling the corresponding dots. I have illustrated in the attached image. Can you please help me her? Thanks. 

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title> Icon </title>
    <script type="text/javascript" src="lib/d3/d3.v3.js"></script>
</head>


<body>

<p id="icon">

<script>

    var dataset = [
        {"id": 1,  "selection": true},
        {"id": 2,  "selection": true},
        {"id": 3,  "selection": true},
        {"id": 4,  "selection": false},
        {"id": 5,  "selection": false},
        {"id": 6,  "selection": true},
        {"id": 7,  "selection": false},
        {"id": 8,  "selection": true}
    ];


    var svg = d3.select("#icon")
            .append("svg")
            .attr("height", 200)
            .attr("width", 200);

    var x = 10, y = 10;

    svg.selectAll("rect")
            .data(dataset).enter()
            .append("rect")
            .attr("width", 10)
            .attr("height", 10)
            .attr("x", function(d, i) { return x = x + 12; })
            .attr("y", function(d, i) { return y; })
            .style("fill", "yellow")
            .style("stroke", "grey")
            .style("stroke-width", ".5px");



</script>

</body>
</html>

enter image description here

Saiful
  • 394
  • 6
  • 14

1 Answers1

1

You can use the same code as you did for the rectangles to append circles on top : http://jsfiddle.net/bh50q7Le/

Simply style the stroke using a function which returns "none" if the point is not a selection.

Formatted code (I've also parameterized the size of the rectangle):

var dataset = [
    {"id": 1,  "selection": true},
    {"id": 2,  "selection": true},
    {"id": 3,  "selection": true},
    {"id": 4,  "selection": false},
    {"id": 5,  "selection": false},
    {"id": 6,  "selection": true},
    {"id": 7,  "selection": false},
    {"id": 8,  "selection": true}
];

var rectsize = 30;

var svg = d3.select("#icon")
        .append("svg")
        .attr("height", rectsize*dataset.length)
        .attr("width", rectsize*(dataset.length + 1));

svg.selectAll("rect")
        .data(dataset).enter()
        .append("rect")
        .attr("width", rectsize)
        .attr("height", rectsize)
        .attr("x", function(d, i) { return  i*(rectsize + 2); })
        .attr("y", function(d, i) { return rectsize; })
        .style("fill", "yellow")
        .style("stroke", "grey")
        .style("stroke-width", ".5px");

svg.selectAll("circle")
        .data(dataset).enter()
        .append("circle")
        .attr("r", rectsize/4)
        .attr("cx", function(d, i) { return rectsize*0.5 + i*(rectsize + 2); })
        .attr("cy", function(d, i) { return rectsize*1.5; })
        // color if selected
        .style("stroke", function(d) { return d.selection ? "grey" : "none"})
        .style("fill", "none")
        .style("stroke-width", "2px");
Ben Southgate
  • 3,388
  • 3
  • 22
  • 31
  • Thanks a lot. Is there any way to create a child element and access parent's attributes, e.g., x, y values from the children in d3? – Saiful Nov 17 '14 at 21:13
  • you can get the parents and children using the normal dom methods after calling `node()` on the selection (see [this](http://stackoverflow.com/questions/10607732/how-to-access-the-parentnode-of-a-d3-js-selection)). You can create child elements simply through successive appends `d3.select('div').append('div').append('div')`. Note - you cant append more shapes onto the svg rectangles though, necessitating the method used above. – Ben Southgate Nov 17 '14 at 21:18