Question

我使用model＆＃39; scatterPlusLineChart＆＃39;绘制了一个散点图泡图，并且工作正常。但我需要画一条具体点。如果有人知道，请帮忙。

var chart;
nv.addGraph(function() {
  chart = nv.models.scatterPlusLineChart()
                .showDistX(true)
                .showDistY(true)
                .transitionDuration(300)
                .color(d3.scale.category10().range());

  chart.xAxis.tickFormat(d3.format('.02f'))
  chart.yAxis.tickFormat(d3.format('.02f'))
  var graphData = [{key : 'Group1', 
                          values : [{x:1, y:5, shape : 'circle'}, {x:4, y:2, shape : 'circle'}]
                   },
                   {key : 'Group2', 
                          values : [{x:4, y:3, shape : 'circle'}, {x:1, y:6, shape : 'circle'}]
                   }
                   ]
  d3.select('#test1 svg')
      .datum(nv.log(graphData))
      .call(chart);

  nv.utils.windowResize(chart.update);

  chart.dispatch.on('stateChange', function(e) { nv.log('New State:', JSON.stringify(e)); });

  return chart;
});

以上是现有代码，以下是我的要求

画两行

1）至（1,5）至（4,3）

2）至（4,2）至（1,6）

Answer 1

使用slope和intercept组参数指定行参数。

例如：

var graphData = [{
        key: 'Group1',
        values: [{
            x: 1,
            y: 5
        }, {
            x: 4,
            y: 2
        }],
        intercept: 6,
        slope: -1
    }, {
        key : 'Group2',
        values : [{
            x: 4,
            y: 3
        }, {
            x: 1,
            y: 6
        }],
        intercept: 7,
        slope: -1
    }]

我允许您使用appropriate maths来计算趋势线的斜率和截距。

nvd3 - 如何使用特定坐标在散点图加上折线图上绘制线条

1 个答案: