0

所以我想要做的是建立某种带有条形图的图表，并用线穿过这个条形图

水平线代表平均数量，条形当然代表单个值。

对于每个条形，当它超过平均值时，它应该是绿色的，如果不是，它应该是红色的。

所以我所达到的是使条形的颜色根据值而变化 - 很容易:) 画一条线并根据我的需要控制它的高度，所以它代表平均值 - 也不是那么难

但是当我把它们放在一起时，问题就出现了，条形图显示得很好，但我看不到这条线。虽然当您右键单击并检查元素时，您会发现它在那里但不可见。

这是我的代码

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

1 回答 1

2

看不到线的原因是没有lineHTML 元素。看起来您正在尝试组合使用 HTML 和 SVG 来呈现图形的示例中的代码。这不起作用，您需要决定其中之一并始终如一地使用它。

出于您的目的，看起来 SVG 会是更好的选择。您只需稍作修改即可使用它，即将一个 SVG 元素附加到 thediv并使用rects 代替divs。网上有很多这方面的例子。您可能会发现NVD3很有帮助——您几乎可以不加修改地使用它来完成您想要做的事情。

于 2013-08-22T10:44:43.957 回答