Question

我有一个基于json文件的NVD3线图。似乎交互式指南按照每个系列在JSON文件中出现的顺序排序。有没有办法让这个工具提示按y值（按任何给定的x值）按降序排序？一种方法是手动排序系列数据在JSON文件中出现的顺序，但我希望在interactiveguideline中可能有一些属性允许我直接在NVD3中执行此操作？

我的html文件如下所示：

<html>
<head>
    <meta charset="utf-8">
    <link href="nvd3/build/nv.d3.css" rel="stylesheet" type="text/css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.2/d3.min.js" charset="utf-8"></script>
    <script src="nvd3/build/nv.d3.js"></script>


    <style>
        text {
            font: 12px sans-serif;
        }
        svg {
            display: block;
        }
        html, body, #chart, svg {
            margin: 0px;
            padding: 0px;
            height: 100%;
            width: 100%;
        }
    </style>
</head>
<body>

<div id="chart" class='with-3d-shadow with-transitions'>
    <svg></svg>
</div>

<script>


  d3.json("distance.json",function(error,data) {
   nv.addGraph(function() {
      var chart = nv.models.lineWithFocusChart()


            .x(function(d,i) { return d[0] })
            .y(function(d,i) {return d[1] });

        chart.xAxis.tickFormat (function(d) {
                return d3.time.format('%x')(new Date(d))
            });
        chart.x2Axis.tickFormat (function(d) {
                return d3.time.format('%x')(new Date(d))
            });
        chart.yAxis.tickFormat(d3.format(',.2f'));
        chart.y2Axis.tickFormat(d3.format(',.2f'));
        chart.useInteractiveGuideline(true)
        ;


      d3.select('#chart svg')
        .datum(data)
        .transition().duration(500)
        .call(chart)
        ;

      nv.utils.windowResize(chart.update);

      return chart;
  });

});


</script>
</body>
</html>

nvd3折线图：如何在交互式指南上创建排序值

0 个答案: