Showing Data in Rectangle using d3.js

[Jaspreet Singh]

Hi,

 

I have few circles containing people names, clicking on which I am showing rectangle to show their information. Now when I click on circle I am able to show rectangle, but information associated with that circle is not being shown in rectangle.

 

Below is the data.json file:

 

{"nodes":[
  {"x":80, "r":40, "label":"Sam","info":"Developer"},
  {"x":200, "r":60, "label":"Pam","info":"Programmer"},
  {"x":380, "r":80, "label":"Ram","info":"Architect"}
]}

 

and script is:

 

<script type="text/javascript">
    var width = 960,
    height = 500;

    var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height)

    d3.json("data.json", function (json) {
        /* Define the data for the circles */
        var elem = svg.selectAll("g myCircleText")
        .data(json.nodes)

        /*Create and place the "blocks" containing the circle and the text */
        var elemEnter = elem.enter()
     .append("g")
     .attr("transform", function (d) { return "translate(" + d.x + ",80)" })

        /*Create the circle for each block */
        var circle = elemEnter.append("circle")
     .attr("r", function (d) { return d.r })
     .attr("stroke", "black")
     .attr("fill", "white")
        .on("click", function () {

            svg.append("rect")
          .attr("x", 100)
          .attr("y", 200)
          .attr("width", 200)
          .attr("height", 200)
          .style("fill", "red")
          .text("text", function (d) { return d.info });
        });

        /* Create the text for each block */
        elemEnter.append("text")
     .attr("dx", function (d) { return -20 })
     .text(function (d) { return d.label })
    })

 

</script>

 

So I want to show data of clicked circle on rectangle.

 

Thanks

 

 

 

[Christophe Viau]

An SVG text tag can't be a child of a rect tag. You should add them both
to the same g tag instead.

var g = svg.append('g')
g.append('rect')
g.append('text')

Chris

[Jaspreet Singh]

Hi Chris , thanks for your reply,

 

I have changed the onclick event to:

 

  .on("click", function () {

 

           var g = svg.append("g")

            g.append("rect")

          .attr("x", 100)
          .attr("y", 200)
          .attr("width", 200)
          .attr("height", 200)

          .style("fill", "red");

          g.append("text")
          .text(function(d){return d.label});
          
        });

 

SVG What I am getting in chrome Browser is:

 

<g>
<rect x="100" y="200" width="200" height="200" style="fill: #ff0000;"></rect>
<text></text>
</g>

Data what I wanted to show is data of Circled on which it's being clicked ,

 

Thanks

 

[Christophe Viau]

You append a new text tag without data binding to it. Just do:
 .on("click", function (d) {
...
 .text(d.label);

--
You received this message because you are subscribed to the Google Groups "d3-js" group.
To unsubscribe from this group and stop receiving emails from it, send an email to d3-js+un...@googlegroups.com.
For more options, visit https://groups.google.com/groups/opt_out.
 
 

[Jaspreet Singh]

Hi Chris,

 

Thanks for your reply yes now SVG Looks good.

 

<g>
<rect x="100" y="200" width="200" height="200" style="fill: #ff0000;"></rect>

<text>Sam</text>
</g>

 

But data is still not coming on Rectangle. Looks like I am missing something.

 

Thanks

 

 

 

[Christophe Viau]

Can you provide your code on jsfiddle, gist, bl.ocks or tributary so we can fix it?
Chris

[Jaspreet Singh]

Thanks a lot Chris for your help.

 

Below Is the code:

 

https://gist.github.com/anonymous/5993023

 

 

Thanks again.

[Christophe Viau]

The text is there. It's just not on the rectangle. Try positioning the g
element with transform instead of the rect with x,y. And it's also
appending a new text on every click. You should reuse one instance of
your label, set it to visible and change the text on click. Don't forget
to hide it when you don't need it.
http://bl.ocks.org/biovisualize/5993031/7e3adc5756d6ccc59d5365de1a9112b6ff3f8536
Chris

[Jaspreet Singh]

Yes Chris . using Transform worked -:). But regarding using the single instance to display text and making it visible and hide still not working. Also i have googled it out still not of much use.

 

Thanks