Attaching Individual Charts to individual HTML DIV elements?

1,296 views
Skip to first unread message

Guerino1

unread,
Mar 13, 2012, 6:23:51 PM3/13/12
to d3...@googlegroups.com
Hi,

Is it possible to attach a chart, like a pie chart or a bar chart, to an HTML DIV element, such that no matter where the DIV shows up on the HTML page, its corresponding chart renders within the DIV at that location?

So, for example, if we have...

------------------------------------------------------------------------------
<body>

  <div id="menu_area">
    <!-- Insert menu code here -->
  </div>

  <div id="pie_chart"></div>  <!-- Would render a pie chart within this DIV -->
  <div id="bar_chart"></div>  <!-- Would render a bar chart within this DIV -->
  <div id="line_chart"></div>  <!-- Would render a line chart within this DIV -->

  <div id="footer">
    <!-- Insert footer code here -->
  </div>
</body>
------------------------------------------------------------------------------

Maybe I'm thinking of this the wrong way but it would seem that if we attach a chart to an element like a DIV, the DIV element would create a natural divider that would ensure that any canvas drawn within it will never interfere with whatever appears in any other HTML element.  Is this the wrong way to be thinking about this?  If so, what's the right way to be thinking of integrating D3 visualizations within common HTML page layouts?

Thanks,

Frank

Kai Chang

unread,
Mar 13, 2012, 6:52:13 PM3/13/12
to d3...@googlegroups.com
Just append the svg elements to the divs instead of the body:

var svg = d3.select("#piechart").append("svg");
// attach the rest of the graph to the svg

You could even use d3 to create the divs. It works on HTML just like SVG.

Frank Guerino

unread,
Mar 14, 2012, 8:51:46 PM3/14/12
to d3...@googlegroups.com
I got it to work.  Very happy.  Thanks for the help.

FG
Message has been deleted

Ganapathi LANA

unread,
Aug 8, 2016, 4:28:25 AM8/8/16
to d3-js


On Monday, 8 August 2016 13:57:48 UTC+5:30, Ganapathi LANA wrote:
Hi,

For my case, 3d Donut has to include. It's working add ID to Div.

Code : var svg = d3.select("body").append("svg").attr("width",700).attr("height",300);

soln:
====
<div id="ddonut"></div>

var svg = d3.select("#ddonut").append("svg");
svg.attr("width",700).attr("height",300);
Reply all
Reply to author
Forward
0 new messages