Drupal 7 + D3 - 在页面中嵌入圆形包可视化

Question

我正在尝试在 Drupal 7 基本页面中嵌入 D3 圆形包，但它出现在页面的错误部分 - 页脚下方。见这里：http://www.thedata.co/circlepackzoom10。我尝试了不同的主题，但没有任何区别。

我正在使用带有 PHP 过滤器的 php include 方法：<?php include './sites/thedata.co/files/html/circle_packZoom-10.html';。

我能够在节点正文中嵌入 D3 图表，因此在某些情况下似乎可以做到。

使用 Chrome，JS 控制台定义内容区域为：<div class="field-item odd" property="content:encoded">。也不适用于 Firefox。

完整代码如下：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 + ")");

有人知道如何将它放置在节点的主要内容区域中吗？谢谢。

Answer 1

选择要放置图表的元素，而不是在 d3.select("body").append("svg") 中选择“body”。

类似：

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

因为此方法只是将其附加到网站的正文元素。