dimple.js addColorAxis 阻止渲染图例

Question

我正在使用 dimple.plot.pie 制作一个简单的饼图，显示不同 age_groups 的相对人口：

<!DOCTYPE html>
<html>
    <head>
        <script src="http://d3js.org/d3.v3.min.js"></script>
        <script src="http://dimplejs.org/dist/dimple.v2.1.6.min.js"></script>
    </head>
    <body>
        <script type="text/javascript">
    var svg = dimple.newSvg("body", 690, 400);
    d3.csv("data.csv", function (data) {
      var myChart = new dimple.chart(svg, data);
      myChart.setBounds(20, 20, 660, 360)
      myChart.addMeasureAxis("p", "Population");
      myChart.addColorAxis("Age_Group",["#FF0000","#00FF00"]);
      mySeries = myChart.addSeries("Age_Group", dimple.plot.pie);
      mySeries.addOrderRule([0,10,20,30,40,50,60,70,80,90,100]);
      myChart.draw();
    });
  </script>
    </body>
</html>

上面的工作完全符合预期 if 我注释掉了 addColorAxis 行。我得到一个带有适当切片的饼图和图例等。

但是对于我的演示文稿，我确实需要为饼图切片指定特定的颜色，因此我添加了 addColorAxis 方法，该方法按预期工作，只是没有显示图例。

我想要一个有效的颜色轴（或某种方式来指定从颜色到切片的匹配）以及一个有效的图例。我是 JavaScript.

的新手

提前致谢。

Answer 1

颜色轴不适用于图例 - 它适用于连续数据，它适用于您的情况，因为您的分类数据是数字的，但它不是那样的。要为分类数据分配特定颜色，您可以使用 assignColor 方法：

<!DOCTYPE html>
<html>
    <head>
        <script src="http://d3js.org/d3.v3.min.js"></script>
        <script src="http://dimplejs.org/dist/dimple.v2.1.6.min.js">
        </script>
    </head>
    <body>
        <script type="text/javascript">
            var svg = dimple.newSvg("body", 690, 400);
            d3.csv("data.csv", function (data) {
                var myChart = new dimple.chart(svg, data);
                myChart.setBounds(20, 20, 660, 360)
                myChart.addMeasureAxis("p", "Population");
                mySeries = myChart.addSeries("Age_Group", dimple.plot.pie);
                myChart.assignColor("0", "#FF0000")
                myChart.assignColor("10", "#E61E00")
                myChart.assignColor("20", "#CD3700")
                myChart.assignColor("30", "#B45000")
                myChart.assignColor("40", "#9B6900")
                myChart.assignColor("50", "#828200")
                myChart.assignColor("60", "#699B00")
                myChart.assignColor("70", "#50B400")
                myChart.assignColor("80", "#37CD00")
                myChart.assignColor("90", "#1EE600")
                myChart.assignColor("100", "#00FF00")
                mySeries.addOrderRule([0,10,20,30,40,50,60,70,80,90,100]);
                myChart.draw();
            });
        </script>
    </body>
</html>

dimple.js addColorAxis 阻止渲染图例

dimple.js addColorAxis prevents legend from rendering

javascript

dimple.js