CODEWITHSUNDEEP
javascripthtmld3.jsvisualization
parastoo
parastoo

Reputation: 382

d3 graph in a div section

I am plotting multiple graphs in one HTML page and I want to add the second graph in a div section to have more proper looking charts.

This is a Plunker I created.

Can someone tell me how I can change the code below to have it in a div section?

HTML:

 <svg width="1200" height="550"></svg>

Javascript:

var svg = d3.select("svg"),
    margin = {top: 70, right: 20, bottom: 50, left: 20},
    width = +svg.attr("width") - margin.left - margin.right,
    height = +svg.attr("height") - margin.top - margin.bottom,
    g = svg.append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")");

Upvotes: 1

Views: 2286

Answers (1)

ksav
ksav

Reputation: 20821

In the file script.js you append the svg to an existing div like so:

var svg = d3.select("#chart").append("svg")

So, do the same in the file positiveChart.js.

Append the svg to an existing div like so (while also giving the svg element the height and width attributes that you had in index.html):

var svg = d3.select("#chart1").append("svg").attr("width", 1200).attr("height", 550)

Then in index.html make a div <div id="chart1"></div> that can be selected by d3 to append your 2nd svg.

Forked plunkr

Upvotes: 1

Related Questions