1

私はJavascriptとD3の両方にかなり慣れていないので、Webサイトの例を自分で試してみました.

JS/HTML コードには以下を使用しました。

<!DOCTYPE html>
<html>
    <head>

        <script src="http://d3js.org/d3.v3.min.js"></script>

        <style type="text/css">

        </style>

    <head>
    <body>
        <script>
        d3.json("mydata.json", function (data) { 
            var canvas = d3.select("body").append("svg")
            .attr("width", 500)
            .attr("height", 500)

            canvas.selectAll("rect")
                .data(data)
                .enter()
                .append("rect")
                .attr("width", function (d) { return d.age * 10; })
                .attr("y", function (d, i) { return i * 50; })
                .attr("fill", "blue")
        })
           </script>
    </body>
</html>

私の「mydata.json」には、次を使用しています：

[
    {"name": "Maria",   "age": 30},
    {"name": "Fred",    "age": 50},
    {"name": "Jason",   "age": 12}  
]

実行しようとするたびに、d3 の例のページの例と同じ結果にはなりません。助けてください、私は d3 がどのように機能するかを理解しようとしています。私はかなり初心者のプログラマーです。

4

2 に答える 2

1

height何かを表示するには属性を設定する必要があるようです。

この種の問題をデバッグする良い方法は、最初に json 呼び出しなしですべてを機能させることです。そのためには、chrome javascript コンソールを使用してエラーを表示し、chrome インスペクターを使用して html コードを表示することをお勧めします。

data = [{
    "name": "Maria",
    "age": 30
}, {
    "name": "Fred",
    "age": 50
}, {
    "name": "Jason",
    "age": 12
}]
//d3.json("mydata.json", function (data) { 
var canvas = d3.select("body").append("svg")
    .attr("width", 500)
    .attr("height", 500)

canvas.selectAll("rect")
    .data(data)
    .enter()
    .append("rect")
    .attr("width", function (d) {
        return d.age * 10;
    })
    .attr("height", "20px")        
    .attr("y", function (d, i) {
        return i * 50;
    })
    .attr("fill", "blue")
//})

jsFiddle: http://jsfiddle.net/chrisJamesC/LX9BF/

于 2013-09-21T23:43:34.753 に答える