所以我想做的是构建某种带有条形图和穿过该条形线的图表
水平线代表平均数，条形当然代表单个值。
对于每个条形，当它超过平均值时，它应该是绿色的，如果不是，它应该是红色的。
所以我达到的目的是使条形的颜色根据值而变化 - 简单:) 画一条线并根据需要控制其高度，因此它代表平均值 - 也不是那么困难
但问题是，当我将它们放在一起时，条形显示正常，但我看不到线条。虽然当您右键单击并检查元素时，您会发现它在那里但不可见。
这是我的代码
<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>
最佳答案
看不到该行的原因是没有 line HTML 元素。您似乎正在尝试组合使用 HTML 和 SVG 的示例中的代码来呈现图形。这是行不通的，您需要选择其中之一并始终如一地使用它。
就您的目的而言，SVG 似乎是更好的选择。您应该只需进行少量修改即可使用它，即将 SVG 元素附加到 div 并使用 rect 作为条形而不是 div >s。网络上有很多这方面的例子。您可能会发现NVD3很有帮助——您几乎可以不加修改地使用它来完成您想要做的事情。
关于javascript - 使用d3绘制散点图，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/18378156/