在条形图上添加条件格式时出现TypeError/Undefined [英] TypeError/Undefined when adding conditional formatting to my bar chart

问题描述

我正在尝试将条件格式添加到我的简单条形图中.它正在部分工作，直到我尝试将鼠标悬停在其中一个栏上，然后出现以下错误:

I'm trying to add conditional formatting to my simple bar chart. It's partially working, until I attempt to hover one of the bars, then I get the following error:

TypeError: c[(this.position + "Field")] is undefined

data.csv的内容:

date,est_sleep,bool_field
2017-11-01,7.5,0
2017-10-31,8,0
2017-10-30,7,1

HTML代码:

<div id="chartContainer">
  <script type="text/javascript">
    d3.csv("data.csv", function(data) {
        var svg = dimple.newSvg("#chartContainer", 500, 600);

        var myChart = new dimple.chart(svg, data);
        myChart.setBounds(60, 30, 400, 300)
        myChart.addCategoryAxis("x", "date");
        var y = myChart.addMeasureAxis("y", "est_sleep");
        var x = myChart.addSeries(null, dimple.plot.bar);
        x.addOrderRule("date", true);
        myChart.draw();

        svg.selectAll('rect')
        .data(data)
        .style("fill", function(d){
            if(d.bool_field == 1)
                return "#f00";
            else
                return "#99C1DC";
        })
        .style("stroke", function(d){
            if(d.bool_field == 1)
                return "#931D1D";
            else
                return "#98B5C9";
        });
    });
  </script>
</div>

当前结果:

推荐答案

出现此错误是由于以下字符串:

This error appears because of this string:

...
svg.selectAll('rect')
  .data(data) // <== !!!
...

似乎您正在重写此库在后台设置的数据绑定.我没有使用dimple.js，也许存在更优雅的解决方案，但我可以建议您使用此解决方案:

It looks like you rewrite data binding that this library sets under the hood. I did not work with dimple.js, maybe exist the more elegant solution, but I can suggest you this solution:

svg.selectAll('rect')
  .style("fill", function(d,i){
    if(data[i].bool_field == 1) // <== get data item by index
      return "#f00";
    else
      return "#99C1DC";
  })
  .style("stroke", function(d,i){
    if(data[i].bool_field == 1) // <== get data item by index
      return "#931D1D";
    else
      return "#98B5C9";
  });

您可以通过索引获得适当的数据项，而无需使用.data()方法.查看下面的隐藏代码片段，它可以正常工作:

You can get appropriate data item by index, without .data() method. Look at the hidden code snippet below, it works:

data = d3.csvParse(`date,est_sleep,bool_field
2017-11-01,7.5,0
2017-10-31,8,0
2017-10-30,7,1`);

var svg = window.dimple.newSvg("#chartContainer", 500, 600);

        var myChart = new dimple.chart(svg, data);
        myChart.setBounds(60, 30, 400, 300)
        myChart.addCategoryAxis("x", "date");
        var y = myChart.addMeasureAxis("y", "est_sleep");
        var x = myChart.addSeries(null, dimple.plot.bar);
        x.addOrderRule("date", true);
        
        myChart.draw();

        svg.selectAll('rect')
        .style("fill", function(d,i){
            if(data[i].bool_field == 1)
                return "#f00";
            else
                return "#99C1DC";
        })
        .style("stroke", function(d,i){
            if(data[i].bool_field == 1)
                return "#931D1D";
            else
                return "#98B5C9";
        });

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

这篇关于在条形图上添加条件格式时出现TypeError/Undefined的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！