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为＆＃34;就业的div中。＆＃34;

//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;

最后，我在图例中添加了一个事件监听器（特别是类＆＃39;可点击的＆＃39;），它通过更新，添加或删除新数据来更新图表。我使用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比例的域。

用于在很长时间内显示数据的图表

1 个答案: