Question

我通过http://www.codecademy.com/创建了以下d3.js。该示例适用于codecademy，但如果我尝试通过本地服务器运行它.style（“width”，function（d）{return d;}）;不起作用。 I.E.虽然每个div的颜色都会改变，但宽度不会改变。

通过Chrome命令行对d3.selectAll（“div”）进行采样，可以发现存储在数据中的数据是正确的。我无法看到我在当地做错了什么。

<!DOCTYPE html>
<html>
    <head>
        <meta charset=utf-8 />
        <title>d3 js beginning</title>
        <link rel="stylesheet" type="text/css" href="stylesheet.css"/>
        <script src="http://d3js.org/d3.v3.min.js" type="text/javascript" charset="utf-8"></script>
    </head>
    <body>
        <div>one</div>
        <div>two</div>
        <div>three</div>
        <div>four</div>
        <div>six</div>
        <script type="text/javascript">
            d3.selectAll("div").style("background-color", "steelblue");

            d3.selectAll("div")
                    .data([55, 50, 65, 70, 22])
                    .text(function(d) {
                return d;
            });

            d3.selectAll("div")
                    .data([55, 50, 65, 70, 22])
                    .transition()
                    .duration(500)
                    .style("width", function(d) {
                return d;
            });

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

D3.js适用于CodeCademy而非本地

0 个答案: