棒グラフに条件付き書式を追加するときのTypeError / Undefined

debugcn 投稿 Dev

TekiusFanatical

単純な棒グラフに条件付き書式を追加しようとしています。バーの1つにカーソルを合わせようとすると、次のエラーが発生するまで、部分的に機能しています。

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>

現在の結果：

ミハイル・シャブリコフ

このエラーは、次の文字列が原因で表示されます。

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

このライブラリが内部で設定するデータバインディングを書き換えているようです。私はdimple.jsを使用していませんでした。おそらく、より洗練されたソリューションが存在しますが、このソリューションを提案できます。

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()メソッドを使用せずに、インデックスごとに適切なデータ項目を取得できます。以下の非表示のコードスニペットを見てください。機能します。

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>

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]