是否可以根据 y-axis 值突出显示 Dimple.js 条形图中的条形？

Question

我只是想知道在 Dimple.js 中是否可以根据 y 轴值突出显示条形？我有一个包含 3 个系列的条形图 - X 作为 CategoryAxis (RefNum)，Y 作为 MeasureAxis（以 K 为单位）和 Y2 作为 PctAxis（以 % 为单位）。在条形图的顶部，我们画了一条线，使用 javascript 计算（例如 Pareto 图）。因此，我们的想法是更改那些超过 80%（Y2）的条形的颜色，或者可能将它们变灰，以及如何突出显示它们。正在挖掘 Dimple.js API 文档，但那里什么也没有……此外，我尝试在

上创建一个简单的 IF ELSE 语句

myChart.defaultColors= [ new dimple.color("blue"), ];

但没有任何运气......这是否可能，因为我找不到任何文档或教程......理想情况下，我们希望有这样的东西：对 d3 不是很熟悉，也许可以通过它获得一些解决方案？我们使用 dimple.js 2.1.6 和 d3.v3 感谢任何帮助，谢谢。

目前完整代码如下：

<!DOCTYPE html>

<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="http://dimplejs.org/dist/dimple.v2.1.6.min.js"></script>

</head>

<div id="chartContainer" style="height: 450px"></div>
<div id="chartContainer2" style="height: 450px"></div>  

 <script>


 var svg = dimple.newSvg("#chartContainer", "100%", "100%");
 var data =[
 { "Project":"one","Cost":3586900, "Ref":"AB-46" },
 { "Project":"two","Cost":1509270, "Ref":"AB-47" },
 { "Project":"three","Cost":1409250, "Ref":"AB-48" },
 { "Project":"four","Cost":1305270, "Ref":"AB-49" },
 { "Project":"five","Cost":1109270, "Ref":"AB-50" },
 { "Project":"six","Cost":1009270, "Ref":"AB-51" },
 { "Project":"seven","Cost":909270, "Ref":"AB-52" },
 { "Project":"eight","Cost":809270, "Ref":"AB-53" } ];

/*** get the total Cost ****/
var totalAmount = 0;
for(var i = 0; i < data.length; i++){
data[i].Cost = +data[i].Cost;
totalAmount += data[i].Cost;

if(i > 0){
   data[i]['CumulativeAmount'] = data[i].Cost + data[i-1].CumulativeAmount;
}else{
  data[i]['CumulativeAmount'] = data[i].Cost;
}
}


// calculate cumulative % from the cumulative amounts & total, round %
  for(var i = 0; i < data.length; i++){
  data[i]['CumulativePercentage'] = (data[i]['CumulativeAmount'] / totalAmount );
  data[i]['CumulativePercentage'] = parseFloat(data[i]['CumulativePercentage'].toFixed(2));
  }

var myChart= new dimple.chart(svg, data);
x = myChart.addCategoryAxis("x", "Ref");
//x.addOrderRule("x", "Ref");

y = myChart.addMeasureAxis("y", "Cost");
y2 = myChart.addMeasureAxis("y", "CumulativePercentage");
y2.tickFormat = "%";
y2.overrideMin = 0;
y2.overrideMax = 1;

var y3 = myChart.addPctAxis("y", "CumulativePercentage");   
y3.hidden = true;

s = myChart.addSeries(null, dimple.plot.bar, [x, y]);
s2 = myChart.addSeries(null, dimple.plot.line, [x, y2]);
s2.lineWeight = 3;                  

/***** get the value of the 80% of 'CumulativePercentage'   */
s3 = myChart.addSeries(null, dimple.plot.area, [x, y2]);

/**** make it invisible, to use custom d3 line later on *****/
s3.lineWeight = 0;

/****** get the 80% of cumulative percentages ****/
s3.data = [{
    "CumulativePercentage": 0.8
}]; 

myChart.draw(1500);

/***** draw a vertical line at 80% of calculated cumulative percentage line on top of the bars *****/

        svg.append("line")
           .attr("x1", x._scale(s3.data["CumulativePercentage"]))
           .attr("x2", x._scale(s3.data["CumulativePercentage"]))
           .attr("y1", myChart._yPixels())
           .attr("y2", myChart._yPixels() + myChart._heightPixels())
           .style("stroke", "red")
           .style("stroke-dasharray", "15")                                                                                                                             
 </script>
 </body>
 </html>

这是我在 x 轴上添加顺序规则时发生的情况，例如x.addOrderRule("Ref", true);

但我需要的图表如下所示：

对如何执行此操作有任何想法吗？！预先感谢您的帮助和努力。

Answer 1

我会直接添加这个 d3。类似于：

myChart.svg.selectAll(".dimple-bar").filter(function(d) {
  return d.y > 60
}).style("fill", "red");

其中 myChart 是您的酒窝图，d.y > 60 是您的标准（y 是保存您的 y2 值的数据变量）。

工作示例：

<!DOCTYPE html>
<html>

<head>
  <script data-require="d3@3.5.3" data-semver="3.5.3" src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.3/d3.js"></script>
  <script src="http://dimplejs.org/dist/dimple.v2.2.0.min.js"></script>
</head>

<body>

  <div id="chartContainer"></div>

  <script type="text/javascript">
    var svg = dimple.newSvg("#chartContainer", 590, 400);

    var data = [{
      x: 'one',
      y: 10
    }, {
      x: 'two',
      y: 80
    }, {
      x: 'three',
      y: 70
    }, {
      x: 'four',
      y: 30
    }, {
      x: 'five',
      y: 20
    }, {
      x: 'six',
      y: 6
    }];

    var myChart = new dimple.chart(svg, data);
    myChart.setBounds(60, 30, 510, 305)
    var x = myChart.addCategoryAxis("x", "x");
    myChart.addMeasureAxis("y", "y");
    myChart.addSeries(null, dimple.plot.bar);
    myChart.draw();


    myChart.svg.selectAll(".dimple-bar").filter(function(d) {
      return d.y > 60
    }).style("fill", "red");
    
  </script>
</body>

</html>

编辑

我怀疑问题可能是您实际上没有任何数据绑定到第二个轴。所以，如果你想要相对于轴的条形值，你可以这样做：

<!DOCTYPE html>
<html>

<head>
  <script data-require="d3@3.5.3" data-semver="3.5.3" src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.3/d3.js"></script>
  <script src="http://dimplejs.org/dist/dimple.v2.2.0.min.js"></script>
</head>

<body>

  <div id="chartContainer"></div>

  <script type="text/javascript">
    var svg = dimple.newSvg("#chartContainer", 590, 400);

    var data = [{
      x: 'one',
      y: 10,
      anotherY: 1
    }, {
      x: 'two',
      y: 80,
      anotherY: 2
    }, {
      x: 'three',
      y: 70,
      anotherY: 3
    }, {
      x: 'four',
      y: 30,
      anotherY: 4
    }, {
      x: 'five',
      y: 20,
      anotherY: 5
    }, {
      x: 'six',
      y: 6,
      anotherY: 6
    }];

    var myChart = new dimple.chart(svg, data);
    myChart.setBounds(60, 30, 510, 305)
    var x = myChart.addCategoryAxis("x", "x");
    var y = myChart.addMeasureAxis("y", "y");
    var anotherY = myChart.addMeasureAxis("y", "anotherY");
    myChart.addSeries(null, dimple.plot.bar);
    myChart.draw();

    console.log(myChart);

    myChart.svg.selectAll(".dimple-bar").filter(function(d) {
      var val_of_bar_on_other_scale = anotherY._scale.invert(y._scale(d.y));
      return val_of_bar_on_other_scale > 2
    }).style("fill", "red");
    
  </script>
  
</body>

</html>

是否可以根据 y-axis 值突出显示 Dimple.js 条形图中的条形？

Is it possible, to highlight bars in Dimple.js bar chart, based on y-axis value?

javascript

d3.js

dimple.js