按 addOrderRule 排序并调整刻度

Question

我正在尝试在酒窝中制作一个水平条形图，它将 (1) 对降序值进行排序，并且 (2) 将刻度线设置为“.2f”（2 位小数），因此工具提示也有 2 位小数。

即使在我将 .addOrderRule 设置为 true 之后，下面的代码仍默认按升序排序，甚至在我指定 .tickFormat 时甚至不绘制图表

我做错了什么？看似简单，但我却绞尽脑汁！

    <script type="text/javascript">

    var margin = 75,
        width = 1000 - margin,
        height = 500 - margin;

    var svg = d3.select("body")
        .append("svg")
        .attr("width", width + margin)
        .attr("height", height + margin);

    d3.csv("flower-prices.csv", function (data) {

      var myChart = new dimple.chart(svg, data);
      myChart.setBounds(150, 30, 700, 350);

      var x = myChart.addMeasureAxis("x", "avgprice");
      x.tickFormat(".2f");

      var y = myChart.addCategoryAxis("y", "strain");

      var series = myChart.addSeries(null, dimple.plot.bar);
      series.addOrderRule("avgprice", true);

      myChart.draw();

    });

    </script>

Answer 1

axis.tickFormat 是正确的，但需要将其设置为成员属性，而不是使用函数符号。因此你只需要使用：

x.tickFormat = ".2f";

顺序规则需要应用于轴而不是系列（系列顺序规则影响条形图中的堆叠顺序，这与此处无关）。另外 descending/ascending 基于零而不是顶部，所以（可能有点违反直觉）默认值是降序的，我猜这里你想要升序，所以它应该是：

y.addOrderRule("avgprice", false);

按 addOrderRule 排序并调整刻度

Sorting by addOrderRule and adjusting ticks

dimple.js