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 s。网上有很多这方面的例子。您可能会发现NVD3很有帮助 - 您几乎可以使用它来修改您想要做的事情。

使用d3绘制散点图

1 个答案: