Question

我正在尝试使用D3.js创建一个简单的树图，但是想要包含外部文件中的d3代码。我有2个文件，treemap.js和treemap.html。但是，树形图未显示，并且控制台中没有弹出错误。我正确引用了d3文件吗？谢谢。

这是treemap.js中的代码

var tree = {
    name: "tree",
    children: [
        { name: "Word-wrapping comes for free in HTML", size: 16000 },
        { name: "animate makes things fun", size: 8000 },
        { name: "data data everywhere...", size: 5220 },
        { name: "display something beautiful", size: 3623 },
        { name: "flex your muscles", size: 984 },
        { name: "physics is religion", size: 6410 },
        { name: "query and you get the answer", size: 2124 }
    ]
};

var width = innerWidth-40,
    height = innerHeight-40,
    color = d3.scale.category20c(),
    div = d3.select("#treemap").append("div")
       .style("position", "relative");

var treemap = d3.layout.treemap()
    .size([width, height])
    .sticky(true)
    .value(function(d) { return d.size; });

var node = div.datum(tree).selectAll(".node")
      .data(treemap.nodes)
    .enter().append("div")
      .attr("class", "node")
      .call(position)
      .style("background-color", function(d) {
          return d.name == 'tree' ? '#fff' : color(d.name); })
      .append('div')
      .style("font-size", function(d) {
          // compute font size based on sqrt(area)
          return Math.max(20, 0.18*Math.sqrt(d.area))+'px'; })
      .text(function(d) { return d.children ? null : d.name; });

function position() {
  this.style("left", function(d) { return d.x + "px"; })
      .style("top", function(d) { return d.y + "px"; })
      .style("width", function(d) { return Math.max(0, d.dx - 1) + "px"; })
      .style("height", function(d) { return Math.max(0, d.dy - 1) + "px"; });
}

这是treemap.html

中body标签内的代码

<body>
    <div id="treemap"></div>
    <script src="d3.v3.js"></script>
    <script src="treemap.js"></script>
</body>

如何从外部文件中使用D3

0 个答案: