如何在酒窝js散点图上添加直线y轴并为其分配颜色答案

【问题标题】：How to add a straight line y-axis over a dimple js scatterplot and assign colour to it如何在酒窝js散点图上添加直线y轴并为其分配颜色
【发布时间】：2017-12-20 13:43:20
【问题描述】：

我想在酒窝 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();

【问题讨论】：

标签： dimple.js horizontal-line

【解决方案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");

那么问题就解决了。

注意：

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

600: svg 高度
500：图表高度
13.22（目标值）：平均成绩，y 轴
50：y 轴刻度线之间的间隔
6：y 轴上的刻度间隔总数

【讨论】：

【解决方案2】：

在酒窝图表中没有直接的方法来添加平均线，但我们可以添加 n 个系列，所以一旦你添加了所需的可视化条、区域、线等。在您的代码中添加另一个像 averageline 系列。这个系列应该只有两个数据点 datapoint1 = {key:YourData[1].key , value : averageValue} , datapoint2 = {key:YourData[last].key, value : averageValue}

var svg = dimple.newSvg("#chartContainer", 600, 400),
    data = [
        { "Value" : 100, "Year" : 2009 , "sample": "0"},
        { "Value" : 40, "Year" : 2010 , "sample": "0"},
        { "Value" : 60, "Year" : 2011 , "sample": "0"},
        { "Value" : 10, "Year" : 2012 , "sample": "0"},
        { "Value" : 80, "Year" : 2013 , "sample": "0"},
        { "Value" : 20, "Year" : 2014 , "sample": "0"}
    ];

// Draw a standard chart using the aggregated data
var chart = new dimple.chart(svg, data);
var x = chart.addCategoryAxis("x", "Year");
var y = chart.addMeasureAxis("y", "Value");
y.hidden = true;
var s = chart.addSeries('channel', dimple.plot.bar);
let horizontalLine = chart.addSeries("Average", dimple.plot.line);
        chart.assignColor("Average","black");
        horizontalLine.data = [];
        for (let i = 0; i < 2; i++) {
            let obj = {};
            obj["Year"] = i ? data[0]["Year"] : data[data.length-1]["Year"];
            obj["Value"] =50;
            horizontalLine.data.push(obj);
        }



chart.draw();

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.8/d3.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/dimple/2.2.0/dimple.latest.js"></script>
<div id="chartContainer"></div>

【讨论】：