使用d3繪制散點圖

Question

所以我要做的是構建某種帶有條形圖和橫線的圖表

水平線代表任何平均數，條當然代表個別值。

對於每個條，當它超過平均值時應該是綠色，如果不是，它應該是紅色。

所以我達到的是使條的顏色根據值變化 - 容易:)繪制一條線並控制它的高度，因此它代表平均值 - 也不是那么困難

但是當我把它們放在一起時，這個問題顯示條形圖很好，但是我看不到這條線。 雖然右鍵單擊並檢查元素時，您會發現它在那里但不可見。

這是我的代碼

<html>

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

<style type="text/css">

        div.bar {
            display: inline-block;
            width: 20px;
            height: 75px;
            margin-right:2%;
        }

        #svg{
            margin-top:5%;
            margin-left:5%; 
        }

    </style>

 </head>

 <body>

    <div id="svg"></div>

    <script>
    var dataset = [8,17,25];       
    var avg = 16.6666666;
    var w = 600;
    var h = 300;
    var barPadding = 45;
    console.log(dataset);

    var svg = d3.select("#svg")
                .attr("width", w)  
                .attr("height", h);;

    svg.selectAll("div")
        .data(dataset)
        .enter()
        .append("div")
        .attr("class", "bar")
        .style("height", function(d) {
            return d*5 + "px";
        })
        .style("background-color",function(d,i){ console.log("D| " + d);    if(d>avg) return "green"; else { return "red"; } });


        var line = svg.append("line")
                      .attr("x1", 5)
                      .attr("y1", 5)
                      .attr("x2", 50)
                      .attr("y2", 5)
                      .attr("stroke-width", 10)
                      .attr("stroke", "black"); 

</script>

 </body>
 </html>

Answer 1

您無法看到該行的原因是沒有line HTML元素。 看起來您正在嘗試將來自使用HTML和SVG的示例中的代碼組合在一起來呈現圖形。 這不起作用，您需要決定其中一個並始終如一地使用它。

出於您的目的，看起來SVG將是更好的選擇。 您應該只需要稍作修改即可使用它，即將SVG元素附加到div並使用rect s作為條形而不是div 。 網上有很多這方面的例子。 您可能會發現NVD3很有用 - 您可以使用它幾乎不修改您正在嘗試的操作。

使用d3繪制散點圖

問題描述

1 個解決方案

解決方案1
2 已采納 2013-08-22 10:44:43

使用d3繪制散點圖

問題描述

1 個解決方案

解決方案1 2 已采納 2013-08-22 10:44:43

解決方案1
2 已采納 2013-08-22 10:44:43