javascript - 如何通过单击按钮将 d3.js 图的 csv 数据集切换到另一个 csv

标签 javascript csv d3.js

我见过这个漂亮的 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";

...其余部分是相同的，直到从两个不同的 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，Units 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: 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>

最佳答案

当然可以:) 您可以将两个按钮(如第二个示例中所示)添加到第一个示例的代码中。我假设 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>

编辑:

要拥有两个仪表板，请将仪表板重命名为仪表板 1 并添加另一个名为仪表板 2 的仪表板

<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");

关于javascript - 如何通过单击按钮将 d3.js 图的 csv 数据集切换到另一个 csv，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56128552/

上一篇：javascript - 过滤数组并减少

下一篇：javascript - 迭代两个数组并返回一个对象数组

相关文章：

javascript - Node.js 类型错误 : callBack is not a function

javascript - D3 中 tsv 生成的表的自定义排序

javascript - 检测文本字段外的点击

c# - 将数百万条记录从 csv 文件插入 SQL Server 数据库的正确方法是什么？

parsing - Julia 解析 CSV

unix - CSV - 删除任何列为空的行

json - 如何使用 JSON 而不是 CSV 执行这个 d3.js 魔术(分组条形图)？

svg - 放大后在 Chrome 上过渡字体大小

javascript - 每列都有一个信息面板的 jqgrid 使网格显示滚动

JavaScript 打印代码无法正常工作

©2024 IT工具网  联系我们