我看过这个漂亮的d3仪表板。我想知道是否可以通过单击按钮将csv文件切换到另一个文件。
那有可能吗？
这是仪表板的链接：
http://bl.ocks.org/farazshuja/4a582fdeaa1f46f885ffa1776346fdec
要解析csv文件的部分，需要通过单击按钮将其更改为“ data2.csv”。
<script>
var freqData;
d3.csv("data.csv", function(data) {
freqData = data.map(function(d) { return {
State: d.State,
freq: {
low: +d.low,
mid: +d.mid,
high: +d.high
}}
});
dashboard('#dashboard',freqData);
});
</script>
我想像以下示例一样切换csv文件：http://bl.ocks.org/enjalot/1525346
<script>
var prices_csv = function()
{
var parse = d3.time.format("%m/%d/%Y").parse;
d3.csv("prices.csv", function(prices)
{
//prices is an array of json objects containing the data in from the csv
console.log("prices:", prices)
data = prices.map(function(d)
{
//each d is one line of the csv file represented as a json object
console.log("d", d)
month = parse(d.month).getMonth();
console.log("month:", d.month, month)
//we slice the dollar sign off then convert to a number with the + sign
//slicing works like "$216".slice(1) gives you 216,
//you can also give it a range like "$216 asdf".slice(1,4) gives you 216
p = d.price
price = +p.slice(1)
console.log("price:", p, price);
return {"month": month, "value":price} ;
})
console.log("data", data)
bars(data);
})
}
</script>
我尝试像示例中那样对其进行调整，但到目前为止没有成功。我是javascript和d3.js的纯粹初学者，因此我希望有人可以帮助我解决这个问题。
更新：
第一部分（通过按钮更改数据文件（csv））似乎运行良好。 但是，还有另一个挑战。结构如下：有一个div，其中包含各种仪表板。仪表板加载有“对象”作为外部文件。通过使用带有两个按钮“ 2018”和“ 2019”的树菜单，我希望根据选择的年份，在仪表板上显示data1“ d1”或data2“ d2”。
这是2018年加载div“ sales1”的第一个菜单按钮。 “ sales1”通过对象加载各种外部html文件。在那里，仅应加载“ d1”（来自仪表板文件的2018年数据）：
<li><a href="#" type="#sales1" id="buttonsales1">units FTP</a></li>
<script>
$(document).ready(function(){
$("#buttonsales1").click(function(){
$("#sales1").toggle();
$("#startscreen").hide();
$("#sales2").hide();
});
});
</script>
在2018年的第一个菜单按钮下面，应该有2019年的第二个菜单按钮。单击时，它会加载相同的div“ sales1”，但这次外部仪表板文件显示data2“ d2”（2019年的数据）。
这是通过对象加载仪表板的div“ sales1”：
<div id="sales1">
<div id="left">
<div class="label" data-toggle="toggle" data-target="#sales1desbox2">
<h2>units sold sales region center</h2>
<p>by months and sales rep.</p>
</div>
<!-- START: Label description. -->
<div id="sales1desbox2" class="togglebox">
<div class="description">
by month and sales region.
</div>
</div>
<!-- END: Label description. -->
<!-- This is the first dashboard -->
<object class="ltrl" type="text/html" data="sales/1/dashboard_center_sales.html">
</object>
</div>
<div id="right">
<div class="label" data-toggle="toggle" data-target="#sales1desbox3">
<h2>units sold sales region east</h2>
<p>by months and sales rep.</p>
</div>
<!-- START: Label description. -->
<div id="sales1desbox3" class="togglebox">
<div class="description">
by month and sales region.
</div>
</div>
<!-- END: Label description. -->
<!-- This is the second dashboard -->
<object class="ltrl" type="text/html" data="sales/1/dashboard_east_sales.html">
</object>
</div>
</div>
<!-- END: div "sales1" -->
调整后的仪表板现在看起来像这样：
<style>
....
....
....
</style>
<body>
<!-- here are the buttons to control the two csv data sets. -->
<button id="d1">Data 1</button><button id="d2">Data 2</button><br />
<div id='dashboard'>
</div>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script>
// here are the event listeners to control the buttons
d3.select("#d1").on("click", function(d, i) {
data1();
});
d3.select("#d2").on("click", function(d, i) {
data2();
});
function dashboard(id, fData) {
var barColor = "steelblue";
.... rest相同，直到从两个不同的csv解析数据的部分为止：
<!-- Here the data data1 (d1) for 2018 -->
<script>
var freqData;
function data1() {
clearDashboard();
d3.csv("data.csv", function(data) {
filteredData = data.filter(function(row) {
return row['KPI'] == 'A';
});
freqData = filteredData.map(function(d) {
return {
Month: d.Month,
freq: {
S40411: +d.S40411,
S40412: +d.S40412,
S40413: +d.S40413,
S40414: +d.S40414
}
};
});
dashboard('#dashboard',freqData);
});
}
// calls the data1 onload
data1();
//clears the dashboard used in data1 and data2
function clearDashboard() {
var myNode = document.getElementById("dashboard");
while (myNode.firstChild) {
myNode.removeChild(myNode.firstChild);
}
}
<!-- Here the data data2 (d2) for 2019 -->
function data2() {
clearDashboard();
d3.csv("data2.csv", function(data) {
filteredData = data.filter(function(row) {
return row['KPI'] == 'A';
});
freqData = filteredData.map(function(d) {
return {
Month: d.Month,
freq: {
S40411: +d.S40411,
S40412: +d.S40412,
S40413: +d.S40413,
S40414: +d.S40414
}
};
});
dashboard('#dashboard',freqData);
});
}
</script>
</body>
为了使其更直观，我创建了一个小的grafic
更新2：
有一个带有按钮的菜单用于2018年和2019年。 看起来像这样：
2018年 FTP单位 2019年 FTP单位
两者的数据结构相同，但数据不同。因此，外部仪表板文件中现在有两个不同的函数：函数data1（）和函数data2（），每个都引用不同的csv文件（2018、2019）。
第一个按钮“ 2018，FTP单位”将div称为“ sales1”：
<li><a href="#" type="#sales1" id="buttonsales1">units FTP</a></li>
第二个按钮的功能相同，但适用于2019年。那么区别在哪里？
Div“ sales1”包含各种嵌入有对象标签的仪表板：
<div id="sales1">
<object class="ltrl" type="text/html" data="sales/0/dashboard_east_sales.html"></object>
…
…
…
</div>
我希望第二个按钮使用相同的仪表板调用相同的div“ sales1”，而不是默认情况下不选择“ function data1（）”，而应在仪表板（dashboard_east_sales.html）中调用“ function data2（）”。
更新3：
我制作了Codepen来确切显示我要实现的目标：
这是index.html，其中dahboard通过object标签嵌入： https://codepen.io/robx360/pen/wbpoQM
这是仪表板文件本身： https://codepen.io/robx360/pen/pmpNWN
如您所见，索引文件中的按钮应触发数据集的更改。到目前为止，按钮位于仪表板文件内。那就是我想要改变的地方。
更新4：
<!–– those buttons shall have the functionality of the buttons within the dashboard file that is embedded with object tag ––>
<li><a href="#" type="#sales1" id="buttonsales1">units FTP 2018</a></li>
<li><a href="#" type="#sales1" id="buttonsales1">units FTP 2019</a></li>
<!-- This part is currently located in the external Dashboard file (dashboard.html) -->
<!-- here are the buttons to control the two csv data sets -->
<button id="d1">Data 1 (should be units FTP 2018)</button>
<button id="d2">Data 2 (should be units FTP 2019)</button>
<!–– The event listeners must point to the object tag ID "dashboard1", how? ––>
<script>
// here are the event listeners to control the buttons
d3.select("#d1").on("click", function(d, i) {
data1();
});
d3.select("#d2").on("click", function(d, i) {
data2();
});
</script>
<div id="sales1">
<div id="right">
<object id="dashboard1" style="width:900px; height:600px; type="text/html" data="dashboard.html">
</object>
</div>
</div>
答案 0 :(得分：3)
当然可以：)您可以将两个按钮（如第二个示例中所示）添加到第一个示例中的代码中。我假设csv文件相似并且图形相同，只是数据会有所不同。如果您希望拥有不同的图表，则可以添加更多逻辑。我已经为您入门提供了一个例子。
...styles
<body>
<!-- here are the buttons to control the two csv data sets -->
<button id="d1">Data 1</button><button id="d2">Data 2</button><br />
<div id="dashboard"></div>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script>
// here are the event listeners to control the buttons
d3.select("#d1").on("click", function(d, i) {
data1();
});
d3.select("#d2").on("click", function(d, i) {
data2();
});
function dashboard(id, fData) {
var barColor = "steelblue";
....continue with all of the code from the first example....
用这两个函数替换结束脚本以控制两个csv文件的加载，并清除从前一个csv创建的节点。
<script>
var freqData;
function data1() {
clearDashboard();
d3.csv("data.csv", function(data) {
freqData = data.map(function(d) {
return {
State: d.State,
freq: {
low: +d.low,
mid: +d.mid,
high: +d.high
}
};
});
dashboard("#dashboard", freqData);
});
}
// calls the data1 onload
data1();
//clears the dashboard used in data1 and data2
function clearDashboard() {
var myNode = document.getElementById("dashboard");
while (myNode.firstChild) {
myNode.removeChild(myNode.firstChild);
}
}
function data2() {
clearDashboard();
d3.csv("./data2.csv", function(data) {
freqData = data.map(function(d) {
return {
State: d.State,
freq: {
low: +d.low,
mid: +d.mid,
high: +d.high
}
};
});
dashboard("#dashboard", freqData);
});
}
</script>
</body>
编辑：
要拥有两个仪表板，请将仪表板重命名为dashboard1，然后添加另一个名为dashboard2的
<div id="dashboard1"></div>
<div id="dashboard2"></div>
然后在data1和data2函数中将这些div作为目标
...
dashboard("#dashboard1", freqData);
...
dashboard("#dashboard2", freqData);
编辑clearDashboard函数以接受一个参数，该参数将确定要清除的div
function clearDashboard(dashboard) {
var myNode = document.getElementById(dashboard);
while (myNode.firstChild) {
myNode.removeChild(myNode.firstChild);
}
}
并将该函数的参数设置为div以清除
...
clearDashboard("dashboard1");
...
clearDashboard("dashboard2");