5

次のコードは、5 つの円を並べて描画することを想定しています。

<head>
<script type='text/javascript' src='jquery-2.0.3.min.js'></script>
<script type='text/javascript' src='knockout-2.3.0.js'></script>
<script type='text/javascript' src='knockout-2.3.0.js'></script>
<script type='text/javascript' src='knockout-2.3.0.js'></script>
<script src="bootstrap.min.js"></script>

<!-- Bootstrap -->
<link href="bootstrap.min.css" rel="stylesheet" media="screen">
<link href="sticky-footer.css" rel="stylesheet">
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>

</head>

<body>
  <div id="viz"></div>

<script type="text/javascript">
    var dataset = [],
    i = 0;

    for(i=0; i<5; i++){
        dataset.push(Math.round(Math.random()*100));
    }        

    var sampleSVG = d3.select("#viz")
        .append("svg")
        .attr("width", 400)
        .attr("height", 400);    

    sampleSVG.selectAll("circle")
        .data(dataset)
        .enter().append("circle")
        .style("stroke", "gray")
        .style("fill", "black")
        .attr("height", 40)
        .attr("width", 75)
        .attr("x", 50)
        .attr("y", 20);

  </script>
 </html>

このウェブサイトhttp://christopheviau.com/d3_tutorial/からコピーしたのは、実際には私のコードではありません

問題は、このコードが円を描画しないことです。クロムのツール検査要素を使用しようとすると、円はあるが表示されないことがわかります。

ストロークはそうではありませんが、円の色が白いのが原因だと思いました。ただし、色の変更はあまり役に立ちませんでした。

そして問題は、たとえば HTML や JavaScript の場合とは異なり、Dreamweaver が実際には役に立たないことです。

この問題を解決するための提案、または編集者への推奨事項はありますか?

4

2 に答える 2

12

長方形を生成して円に変更した例を取り上げたようですが、円には x、y、高さ、幅の属性がなく、代わりに cx、cy、および半径の属性があります。

sampleSVG.selectAll("circle")
    .data(dataset)
    .enter().append("circle")
    .style("stroke", "gray")
    .style("fill", "black")
    .attr("r", 40)
    .attr("cx", 50)
    .attr("cy", 20);

複数の円を重ねて描画します。

于 2013-08-15T10:32:15.050 に答える