Fatal编程技术网

Javascript 使用d3绘制散点图

javascript html graph svg d3.js

Javascript 使用d3绘制散点图,javascript,html,graph,svg,d3.js,Javascript,Html,Graph,Svg,D3.js,所以我要做的是建立一个有横线的图表，横线穿过这个横线 水平线表示任意值的平均数，条形图当然表示单个值 当它超过平均值时，它的每一条都应该是绿色的，如果不是，它应该是红色的 因此，我达到的目的是使条形图的颜色根据值而变化-简单： 画一条线，并控制它的高度，因为我想，所以它代表的平均值-也没有那么困难 但当我把这两条线放在一起的时候，问题是，这两条线显示得很好，但我看不到线。虽然当您右键单击并检查元素时，您会发现它在那个里但不可见 这是我的密码 <html> <head>

所以我要做的是建立一个有横线的图表，横线穿过这个横线

水平线表示任意值的平均数，条形图当然表示单个值

当它超过平均值时，它的每一条都应该是绿色的，如果不是，它应该是红色的

因此，我达到的目的是使条形图的颜色根据值而变化-简单： 画一条线，并控制它的高度，因为我想，所以它代表的平均值-也没有那么困难

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

这是我的密码

<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>
看不到行的原因是没有行HTML元素。看起来您正试图结合使用HTML和SVG呈现图形的示例中的代码。这是行不通的，你需要选择其中一个，并始终如一地使用它

出于您的目的，SVG似乎是更好的选择。您应该只需稍作修改就可以使用它，即将SVG元素附加到div中，并使用矩形代替div。网上有很多这样的例子。您可能会发现它很有帮助，您可以使用它来完成您的工作。

谢谢，它很有效。但是请注意，NVD3.js的概念与d3.js完全不同，尽管它们做相同的工作NVD3基本上是基于d3的一组高级函数，所以我不会称它们为完全不同的。