Drupal 7 + D3 - embed circle-pack visualization in a page

1
votes

I'm trying to embed a D3 circle-pack in a Drupal 7 basic, page but it's appearing in the wrong section of the page - below the footer. See here: http://www.thedata.co/circlepackzoom10. I've tried different themes but make no difference.

I'm using the php include method with the PHP filter: <?php include './sites/thedata.co/files/html/circle_packZoom-10.html'; .

I'm able to embed a D3 chart in the node body so seems it can be done in some cases.

Using Chrome, JS console defines content area as: <div class="field-item odd" property="content:encoded">. Doesn't work with Firefox either.

Here's the complete code: http://jsfiddle.net/cajmcmahon/9a5xaovv/

var pack = d3.layout.pack()
    .size([r, r])
    .children(function(d) {
        return d.values; // accessor for children
    })
    .value(function(d) {
        return d.values; // accessor for values
    });

//Declare SVG attributes
var svg = d3.select("body").append("svg")
    .attr("width", w)
    .attr("height", w)
    .append("g")
    .attr("transform", "translate(" + (w - r) / 2 + "," + (w - r) / 2 + ")");

Anyone any idea how to place it within the main content area of the node? Thanks.

1
javascriptd3.jsdrupal-7

1 Answers

1
votes

Select the element where you want to put the chart instead of selecting "body" in d3.select("body").append("svg").

something like:

d3.select('#divID').append('svg') ... etc

As this method just appends it to the body element of the website.