如何在凹坑js散点图上添加直线y轴并为其指定颜色

Question

我想在凹坑js散点图上绘制一条水平平均线。我试图遵循here的解决方案。但是我只能得到一个点而不是一行而且assignColor也不起作用。我无法弄清楚问题是什么。有什么建议？非常感谢您的帮助。

      var svg = dimple.newSvg("#ChartContainer", 800, 600);
      var myChart = new dimple.chart(svg, data);
      myChart.setBounds(60, 50, 600, 500)
      myChart.addMeasureAxis("x", "ESCIndex");
      myChart.addMeasureAxis("y", "Grade");
      var s=myChart.addSeries(["OECD"], dimple.plot.bubble);
      var myLegend=myChart.addLegend(10, 10, 400, 30, "right", s);         

      var s1 = myChart.addSeries("Average", dimple.plot.line);
      s1.data = [
    { "Average" : "avg", "Grade" : 13.22, "ESCIndex" : -10.45 }, 
    { "Average" : "avg", "Grade" : 13.22, "ESCIndex" : 6.79 }
    ];
      myChart.assignColor("Average", "green");

      myChart.draw();

Answer 1

基于here.的解决方案

我将代码更改为以下内容：

  var svg = dimple.newSvg("#ChartContainer", 800, 600);
  var myChart = new dimple.chart(svg, data);
  myChart.setBounds(60, 50, 600, 500)
  myChart.addMeasureAxis("x", "ESCIndex");
  myChart.addMeasureAxis("y", "Grade");
  myChart.addSeries(["OECD"], dimple.plot.bubble);
  var myLegend=myChart.addLegend(10, 10, 400, 30, "right");         

  myChart.draw();

  svg.append("line")
        .attr("x1", myChart._xPixels())
        .attr("x2", myChart._xPixels() + myChart._widthPixels()) 
        .attr("y1", 527.967)
        .attr("y2", 527.967)
        .style("stroke", "green");

然后问题就解决了。

Note:

527.967 ≈ (600 - 500)/2 + 500 - (13.22 *500)/(50*6)

• 600：svg身高
• 500：图表高度
• 13.22（目标值）：平均等级，y轴
• 50：y轴上刻度线之间的间隔
• 6：y轴上的滴答间隔总数