Question

您能否告诉我为什么在声明变量x和y之后，<svg>标记以及后面的所有内容不再出现在我的网络浏览器的检查器中？当我删除刚刚提到的变量<svg>标记及其id = bar atribute时，所有以下代码都会正确显示。

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<!-- <script src="https://d3js.org/d3.v4.min.js"></script> -->
<script src="./scripts/d3/d3.min.js"></script>

<script type="./scripts/d3js.js"></script>
<link rel="stylesheet" type="text/css" href="./styles/d3css.css">
<title>d3</title>
</head>

<body>

<script type="text/javascript">



var data = [213,20,60,232,150,74,110,39];
var w = 1000;
var h = 500;

var x = d3.scale.linear()
    .domain([0, data.length])
    .range([0,w]);
var y = d3.scale.linear()
    .domain([0, d3.max(data)])  
    .range([0,h]); 


var svg = d3.select("body").append("svg")
    .attr("id", "chart")
    .attr("width", w)
    .attr("height", h);


svg.selectAll(".bar")
    .data(data)
    .enter()
    .append("rect")
    .attr("class", "bar")
    .attr("x", function(d,i){
        return i * 40;
    })
    .attr("y", 0)
    .attr("width", 39)
    .attr("height", function(d,i){
        return y(d);
    })


</script>
</body>
</html>

Answer 1

您使用的是D3 v4.x.在该版本中，没有scale.linear()。而不是那样，它应该是：

var x = d3.scaleLinear()

同样适用于var y。

由于此行位于var svg（附加SVG元素）之前，因此会抛出错误并且永远不会创建SVG标记。查看控制台，您将看到错误。

显示从d3.js到Web检查器的信息

1 个答案: