Question

这是简单的html，它上面有2个圆圈和标签

 <!DOCTYPE html>
 1<html>
   <head>
     <script type="text/javascript" src="d3.min.js"></script>
      <script type="text/javascript" src="simple.js"></script>
      <link href="style 2.css" type="text/css" rel="stylesheet">
   </head>
   <body> 
         <h1>Test</h1>
        <div id="small-gr"></div>
   </body>
 </html>

simple.js这是d3 dashing网站的简单示例。

var circleData = [
  { "cx": 20, "cy": 20, "radius": 20, "color" : "green" },
  { "cx": 70, "cy": 70, "radius": 20, "color" : "purple" }];

//Create the SVG Viewport
var svgContainer = d3.selectAll("body").append("svg")
                                     .attr("width",200)
                                     .attr("height",200);


//Add circles to the svgContainer
 var circles = svgContainer.selectAll("circle")
                            .data(circleData)
                            .enter()
                            .append("circle");

// //Add the circle attributes
 var circleAttributes = circles
                        .attr("cx", function (d) { return d.cx; })
                       .attr("cy", function (d) { return d.cy; })
                        .attr("r", function (d) { return d.radius; })
                       .style("fill", function (d) { return d.color; });

//Add the SVG Text Element to the svgContainer
var text = svgContainer.selectAll("text")
                        .data(circleData)
                        .enter()
                        .append("text");

//Add SVG Text Element Attributes
var textLabels = text
                 .attr("x", function(d) { return d.cx; })
                 .attr("y", function(d) { return d.cy; })
                 .text( function (d) { return "( " + d.cx + ", " + d.cy +" )"; })
                 .attr("font-family", "sans-serif")
                 .attr("font-size", "20px")
                 .attr("fill", "red");

我们的问题非常奇怪，如果您看到<html>标记可以找到1，那就是我们必须使用的代码才能使代码正常工作，但是如果删除它代码就不会没有编辑，它直接取自d3网站。谁能解释为什么会这样？

d3.js无效的简单示例

0 个答案: