d3js动态csv从下拉列表切换 [英] d3js dynamic csv switch from dropdown list

问题描述

我是d3js的新手，我在这里成功使用示例： https：// gist。 github.com/d3noob/4414436

I'm new to d3js, and I'm successfully using example here: https://gist.github.com/d3noob/4414436

这是相当不错，因为它远程工作，CSV存储在服务器端。
现在，我想进一步，并添加从列表中选择源CSV并重绘图表的能力。

That's quite nice, because it works remotely, the CSV being stored on server side. Now, I'd like to go further, and add the ability to select the source CSV from a list and the redraw the chart.

停留在写php和java，java回声由php，所以我认为我完全错误的方式。

I'm stuck in writing php and java, and java echo'ed by php, so I think that I'm totally on the wrong way.

你有一个例子说明如何执行图表更新，从包含服务器端CSV文件的下拉列表中选择新的CSV？

Would you have an example that illustrates how to perform the chart update reading a new CSV selected from a dropdown list containing the server side's CSV pathes?

请注意，

Sylvain

推荐答案

我假设你不需要帮助下拉列表。最简单的方法是简单地将下拉列表中的选择输入到 var ，并使用 var 您可以执行 d3.csv（）调用。例如：

I'm assuming you don't need help making the drop-down list. The simplest method would be to simply feed in the drop-down list selection into a var, and use that var when you do your d3.csv() call. For example:

//storing the drop-down selection in the ddSelection var
var ddSelection = document.getElementById("secondOption").value,

//feeding that to create the csv filename you want
var csvFile = "/some server path/" + ddSelection + ".csv";

d3.csv(csvFile, function(error, dataset) {
    //a bunch of cool visualizing stuff
})

然后，您只需记住在加入时 .exit（）您的数据，以便图表使用新数据集更新 - Mike Bostock的与联接思考是标准参考。

Then you'll just need to remember to include .exit() when you're joining your data, so that the graph updates with the new dataset - Mike Bostock's Thinking with Joins is the standard reference for that.

这篇关于d3js动态csv从下拉列表切换的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！