Question

<html>
<head>
<script src="http://d3js.org/d3.v3.min.js"></script>
</head>
<body> 
<script>
    var dset=[40,50,60];
    var dvar=d3.select("body")
.append("svg")
.attr("width", 500)
.attr("height", 500);


 var ba=dset.selectAll("rect")
    .data(dset)
    .enter()
    .append("rect")
    .attr("width",function(d){return d;})
    .attr("hetight",50);
    </script>
    </body>
    </html>

上下文：在这行代码中，selectAll（）函数不起作用

Answer 1

你犯了小错误。运行下面的代码，它将工作。

<html>
<head>
<script src="http://d3js.org/d3.v3.min.js"></script>
</head>
<body> 
<script>
var dset=[40,50,60];
var dvar=d3.select("body")
.append("svg")
.attr("width", 500)
.attr("height", 500);


var ba= dvar
.selectAll("rect")
.data(dset)
.enter()
.append("rect")
.attr("width",function(d){return d;})
.attr("height",50);
</script>
</body>
</html>

在您的示例中，您只能看到单个框。如果你想看到所有的框，你需要在attr之后添加下面的代码（“height”，50）。

.attr("y", function(d, i){
    return i * 100;
});

完整代码如下： -

<html>
<head>
<script src="http://d3js.org/d3.v3.min.js"></script>
</head>
<body> 
<script>
var dset=[40,50,60];
var dvar=d3.select("body")
.append("svg")
.attr("width", 500)
.attr("height", 500);


var ba= dvar
.selectAll("rect")
.data(dset)
.enter()
.append("rect")
.attr("width",function(d){return d;})
.attr("height",50)
.attr("y", function(d, i){
                            return i * 100;
                        });;
</script>
</body>
</html>

无法从d3.js代码获取输出？

1 个答案: