Question

我试图在图表的底部区域上绘制一个矩形，x从0到7，y从100＆＃39;到200＆＃39; 00。 d3js坐标与nvd3不同，所以我需要弄清楚如何转换坐标。你可以看到我的尝试。矩形是红色的。有人可以指导我吗？

＆＃13;

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.8.5/nv.d3.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.8.5/nv.d3.css" rel="stylesheet" />
<script type="text/javascript">
function draw(){
   var raw_data = [{"values": [{"y": 349189.0, "x": 0}, {"y": 379731.0, "x": 1}, {"y": 313599.0, "x": 2}, {"y": 349650.0, "x": 3}, {"y": 584350.0, "x": 4}, {"y": 579617.0, "x": 5}, {"y": 566992.0, "x": 6}, {"y": 436520.0, "x": 7}], "key": "Kv3.4.78", "yAxis": "1"}, {"values": [{"y": 248515.0, "x": 0}, {"y": 254820.0, "x": 1}, {"y": 204568.0, "x": 2}, {"y": 131445.0, "x": 3}, {"y": 75468.0, "x": 4}, {"y": 75958.0, "x": 5}, {"y": 69591.0, "x": 6}, {"y": 105540.0, "x": 7}], "key": "Kv3.4.77", "yAxis": "1"}, {"values": [{"y": 402385.0, "x": 0}, {"y": 445230.0, "x": 1}, {"y": 389273.0, "x": 2}, {"y": 407087.0, "x": 3}, {"y": 793282.0, "x": 4}, {"y": 791361.0, "x": 5}, {"y": 753506.0, "x": 6}, {"y": 630189.0, "x": 7}], "key": "Kv3.4.135", "yAxis": "1"}, {"values": [{"y": 291251.0, "x": 0}, {"y": 327427.0, "x": 1}, {"y": 268603.0, "x": 2}, {"y": 282463.0, "x": 3}, {"y": 476328.0, "x": 4}, {"y": 467403.0, "x": 5}, {"y": 451372.0, "x": 6}, {"y": 421342.0, "x": 7}], "key": "Kv3.4.79", "yAxis": "1"}];
   var qc_type = 'aligned';
   var data = raw_data;
   nv.addGraph(function() {
       var chart = nv.models.lineChart();
       chart.margin({
           top: 30,
           right: 60,
           bottom: 100,
           left: 100
       });

       chart.yAxis.tickFormat(d3.format(',.02f'));
       chart.showLegend(true).useVoronoi(false);
       d3.select('#qc_overtime_id svg')
           .datum(data)
           .transition().duration(500)
           .attr('width', 1300)
           .attr('height', 400)
           .call(chart);
   });
   
var svg = d3.select('#qc_overtime_id svg')
	.append("svg")
	.attr("width", 400)
	.attr("height", 200);
	
	var rec_data = [{x1: 300, x2: 10000, y1: 150, y2: 300}];
	var rects = svg.selectAll("foo")
		.data(rec_data)
		.enter()
		.append("rect")
		.attr("x", d=> d.x1)
		.attr("y", d=> d.y1)
		.attr("width", d=> d.x2 - d.x1)
		.attr("height", d=> d.y2 - d.y1)
		.attr("fill", "red")
		.attr("opacity", 0.5);
}
</script>
</head>
<body onload="draw();">
	 <div id="qc_overtime_id">
	   <svg style="width:1300px;height:550px;"></svg>
	 </div>
</body>
</html>

＆＃13;

更新这是解决方案帮助下的另一个例子：

＆＃13;

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.8.5/nv.d3.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.8.5/nv.d3.css" rel="stylesheet" />

<script type="text/javascript">
function draw(){
  data = [{"values":[
{"x": 0, "y": 0},{"x": 1, "y": 1219000},{"x": 2, "y": 1035409},{"x": 3, "y": 1305046},{"x": 4, "y": 2060407},{"x": 5, "y": 583834},{"x": 6, "y": 1111078},{"x": 7, "y": 987715},{"x": 8, "y": 1044967},{"x": 9, "y": 1026166},{"x": 10, "y": 1038733},{"x": 11, "y": 1011022},{"x": 12, "y": 1048301},{"x": 13, "y": 1079529},{"x": 14, "y": 1232463},{"x": 15, "y": 1004553},{"x": 16, "y": 1050922},{"x": 17, "y": 219877},{"x": 18, "y": 909885}], "key": "Kv3.4.79", "yAxis": "1"}];
 
   var labels = [];
   for(ind in data[0].values){
      labels.push("abcd" + ind);
   }

   nv.addGraph(function() {
       var chart = nv.models.lineChart();
       chart.margin({
           top: 30,
           right: 60,
           bottom: 100,
           left: 100
       });

       chart.xAxis
           .rotateLabels(-25).tickFormat(function(d) {
               return labels[d];
           });
       chart.yAxis.tickFormat(d3.format(',.02f'));

       chart.showLegend(true).useVoronoi(false);
       svg = d3.select('#chart svg')
           .datum(data)
           .transition().duration(500)
           .attr('width', 1300)
           .attr('height', 400)
           .call(chart);

         var rec_data = {x1: 0, x2: labels.length, y1: 700000, y2: 1000000};
         d3.select('#chart svg')
          .append( 'rect' )
            .attr("x", chart.margin().left + chart.xAxis.scale()( rec_data.x1 ) )
            .attr("y", chart.yAxis.scale()( rec_data.y1 ) - chart.margin().bottom - chart.margin().top )
            .attr("width", chart.xAxis.scale()( rec_data.x2 ) - chart.xAxis.scale()( rec_data.x1 ) )
            .attr("height", chart.yAxis.scale()( rec_data.y1 ) - chart.yAxis.scale()( rec_data.y2 ) )
            .attr("fill", "green")
            .attr("opacity", 0.3);

   });
}
</script>
</head>
<body onload="draw();">
	 <div id="chart">
	   <svg style="width:1300px;height:550px;"></svg>
	 </div>
</body>
</html>

＆＃13;

Answer 1

我不太确定，nvd3如何组成其折线图（y值刻度看起来很奇怪），但以下内容应该适合你。

所以我基本上做了什么：

我在nvd3回调中移动了矩形代，因此我可以访问chart对象。
我使用了nvd3缩放功能来找到矩形的正确坐标。
我在这里省略了数据绑定，因为你只有一个矩形，它为我节省了几行代码， - ）

nvd3的文档非常糟糕，所以我不得不亲自检查对象及其方法，但这似乎是官方认可的添加其他元素的方法。

function draw(){
   var raw_data = [{"values": [{"y": 349189.0, "x": 0}, {"y": 379731.0, "x": 1}, {"y": 313599.0, "x": 2}, {"y": 349650.0, "x": 3}, {"y": 584350.0, "x": 4}, {"y": 579617.0, "x": 5}, {"y": 566992.0, "x": 6}, {"y": 436520.0, "x": 7}], "key": "Kv3.4.78", "yAxis": "1"}, {"values": [{"y": 248515.0, "x": 0}, {"y": 254820.0, "x": 1}, {"y": 204568.0, "x": 2}, {"y": 131445.0, "x": 3}, {"y": 75468.0, "x": 4}, {"y": 75958.0, "x": 5}, {"y": 69591.0, "x": 6}, {"y": 105540.0, "x": 7}], "key": "Kv3.4.77", "yAxis": "1"}, {"values": [{"y": 402385.0, "x": 0}, {"y": 445230.0, "x": 1}, {"y": 389273.0, "x": 2}, {"y": 407087.0, "x": 3}, {"y": 793282.0, "x": 4}, {"y": 791361.0, "x": 5}, {"y": 753506.0, "x": 6}, {"y": 630189.0, "x": 7}], "key": "Kv3.4.135", "yAxis": "1"}, {"values": [{"y": 291251.0, "x": 0}, {"y": 327427.0, "x": 1}, {"y": 268603.0, "x": 2}, {"y": 282463.0, "x": 3}, {"y": 476328.0, "x": 4}, {"y": 467403.0, "x": 5}, {"y": 451372.0, "x": 6}, {"y": 421342.0, "x": 7}], "key": "Kv3.4.79", "yAxis": "1"}];
   var qc_type = 'aligned';
   var data = raw_data;
   nv.addGraph(function() {
       var chart = nv.models.lineChart();
       chart.margin({
           top: 30,
           right: 60,
           bottom: 100,
           left: 100
       });

       chart.yAxis.tickFormat(d3.format(',.02f'));
       chart.showLegend(true).useVoronoi(false);
       d3.select('#qc_overtime_id svg')
           .datum(data)
           .transition().duration(500)
           .attr('width', 1300)
           .attr('height', 400)
           .call(chart);

       var rec_data = {x1: 0, x2: 7, y1: 100000, y2: 200000};
       d3.select('#qc_overtime_id svg')
          .append( 'rect' )
            .attr("x", chart.margin().left + chart.xAxis.scale()( rec_data.x1 ) )
            .attr("y", chart.yAxis.scale()( rec_data.y1 ) - chart.margin().top )
            .attr("width", chart.xAxis.scale()( rec_data.x2 ) - chart.xAxis.scale()( rec_data.x1 ) )
            .attr("height", chart.yAxis.scale()( rec_data.y1 ) - chart.yAxis.scale()( rec_data.y2 ) )
            .attr("fill", "red")
            .attr("opacity", 0.5);

   });
}
draw();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.8.5/nv.d3.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.8.5/nv.d3.css"  rel="stylesheet" />
<div id="qc_overtime_id">
  <svg style="width:1300px;height:550px;"></svg>
</div>

在d3js和nvd3的折线图上绘制一个矩形

1 个答案: