Question

<html>
<head>
    <script src="https://d3js.org/d3.v5.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <!--<script src="lib/VSS.SDK.min.js"></script>!-->
</head>
<body>
        <div id="chart_container"></div>
            <script type="text/javascript">

                $(document).ready(function(){

                    var dataObj = []

                    for (let i = 0; i < 5; i++) {
                        dataObj[i] = {
                            potenial: 5 + i,
                            actual: 12 + (2 * i),
                            latest: 9 + (i)
                        }
                    }

                    console.log(dataObj)

                    // Create variable for the SVG
                    var svg = d3.select("#chart_container").append("svg")
                            .attr("height","50%")
                            .attr("width","50%");

                    // Select, append to SVG, and add attributes to rectangles for bar chart
                    svg.selectAll(".bar")
                        .data(dataObj)
                        .enter().append("rect")
                            .attr("class", "bar")
                            .attr("height", function(d, i) {return (d.actual * 10)})
                            .attr("width","40")
                            .attr("x", function(d, i) {return (i * 60) + 25})
                            .attr("y", function(d, i) {return 400 - (d.actual * 10)});

                })

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

当我尝试使用d3.select(body)...时，它显示正常，但我想将ID为div的{{1}}放入。似乎没有正确选择带有ID的div，但我不知道如何解决。

我在做什么错了？

d3.js选择功能不显示条形图

0 个答案: