使用D3繪制圓圈

Question

以下代碼用於繪制彼此相鄰的五個圓圈

<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/

問題是這段代碼沒有繪制任何圓圈。 雖然當我嘗試使用chrome的工具檢查元素時，我發現圓圈在那里，但它們不可見。

我認為原因是圓圈的白色雖然中風不是。 然而，改變顏色並不是很有用。

問題在於，Dreamweaver並沒有像HTML或JavaScript那樣真正起作用。

有關解決此問題的任何建議，或對編輯器的任何建議？

Answer 1

看起來您舉了一個生成矩形並將其更改為圓形但圓形沒有x，y，高度和寬度屬性的示例，它們具有cx，cy和radius屬性。

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

將多個圓圈一個在另一個上面繪制。

Answer 2

@Robert Longson感謝Robert Longson

如果你想避免圓圈之間的交錯這是代碼

<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", 500)
    .attr("height", 300);    

    sampleSVG.selectAll("circle")
    .data(dataset)
    .enter().append("circle")
    .style("stroke", "gray")
    .style("fill", "white")
    .attr("r", 40)
    .attr("cx", function(d, i){return 50 + (i*80)})
    .attr("cy", 120);
</script>

使用D3繪制圓圈

問題描述

2 個解決方案

解決方案1
9 已采納 2013-08-15 10:32:15

解決方案2
3 2013-08-15 11:00:22

使用D3繪制圓圈

問題描述

2 個解決方案

解決方案1 9 已采納 2013-08-15 10:32:15

解決方案2 3 2013-08-15 11:00:22

解決方案1
9 已采納 2013-08-15 10:32:15

解決方案2
3 2013-08-15 11:00:22