显示长期数据的图表

Question

我正在寻找一个图表来显示我的长期价值观。问题是由于时间轴，大多数图表都没有用，因为其中有很多点，我无法放大或缩小。

所以我正在寻找一个图表，我可以在其中加载我的完整数据，用户可以选择他想要的数据（例如 Values1、values2），然后单击图表以仅查看他想要的时间跨度。

一个完美的例子是 http://dataaddict.fr/prenoms，但我不知道在哪里可以找到我可以使用的类似图表。我搜索了几个小时，但没有找到任何类似的东西。在左侧用户可以选择他想要的数据，在图表下用户可以选择时间跨度。

我希望有人能给我一个好的提示 :) 谢谢！

Answer 1

免责声明：我是 javascript 和 d3.js 的新人，所以请对我所说的一切持怀疑态度，但我会尽力帮助你。

我能够通过在图表下方创建一组常规 HTML 按钮来解决类似的问题（在每个按钮内使用 svg 矩形以在每个按钮中创建一个颜色方块）。

//Create the legend div
    var legendHtml = "<div style='width:" + (w+marginLeft+marginRight) + "px;'>";

    //Size of Squares in legend buttons
    var legendRectSize = 9;

    //Create a button for each item
    varNames.forEach(function(element, index){
        legendHtml = legendHtml + "<button class='legend clickable active' id='" + varNames[index] + "'><svg width='9' height='9'><g><rect width='"+legendRectSize+"' height='"+legendRectSize+"' style='fill:" + color(varNames[index]) + ";'></rect></g></svg> " + varNames[index] + "</button>";
    });

    //Close out the legend div
    legendHtml = legendHtml + "</div>";

然后我在我的图表下方添加了一个新的图例 div，它恰好位于 ID 为 "employment."

的 div 中

//Add the legend div to the bottom of the chart
    var legendDiv = document.createElement("div");
    var legendIdAtt = document.createAttribute("id");
    legendIdAtt.value = "legend";
    legendDiv.setAttributeNode(legendIdAtt);
    document.getElementById('employment').appendChild(legendDiv);
    document.getElementById('legend').innerHTML = legendHtml;

最后，我向图例（特别是 class 'clickable'）添加了一个事件侦听器，它通过更新、添加或删除新数据来更新图表。我使用 jquery 来执行此操作，因为我发现内置 d3.on() 方法在文档加载后动态创建的节点上不起作用。

//Event listener for updating the chart
    $('body').on('click', '.clickable', function () {
        var id = $(this).attr('id');
        //Toggle the buttons active or not active
        if ($(this).hasClass("active")) {
            $(this).removeClass("active");
        } else {
            $(this).addClass("active");
        }
        change(id);
    });

您的更改功能会根据您要执行的操作而有所不同，但就我而言，我确保按钮的 ID 与数据中的变量名称相同（我最初将 ID 设置为调用变量名称），然后通过一般更新模式来更新我的折线图。这篇文章帮助我理解了 d3 的一般更新模式：http://bl.ocks.org/mbostock/3808218

希望对您有所帮助！干杯！

编辑： 您应该能够制作一组按钮，根据用户想要使用此方法添加到购物车的数据来添加、更新和减去数据。您可以使用类似的方法创建一组 html 按钮，单击这些按钮时，会更新 x 刻度的域。

显示长期数据的图表

Chart to display data over a long time frame

d3.js

nvd3.js