Fatal编程技术网
  • csv/
  • Csv 使用html下拉列表更新d3.js choropleth/table组合

Csv 使用html下拉列表更新d3.js choropleth/table组合

csv dictionary d3.js

Csv 使用html下拉列表更新d3.js choropleth/table组合,csv,dictionary,d3.js,dropdown,choropleth,Csv,Dictionary,D3.js,Dropdown,Choropleth,晚上好 <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/d3-legend/1.9.0/d3-legend.min.js"></script> <body> <!-- Table to hold the

晚上好

    <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3-legend/1.9.0/d3-legend.min.js"></script>

    <body>
      <!-- Table to hold the Divs -->
      <table border="0" cellpadding="10" style="overflow-y: scroll;">
        <tr>
          <td>
            <div id="table_container" class="csvTable"></div>
          </td>
          <td>
            <div id="map_container"></div>
          </td>
          <td>
            <div id="d3legend" class="legend"></div>
          </td>
          <td>
            <div class="styled-select">
              <select id="data_sources" name="data_sources">
                <option value="regionalDistrictData.csv" selected>Census 1996 Data</option>
                <option value="regionalDistrictData2.csv">Census 2001 Data</option>
                <option value="regionalDistrictData3.csv">Census 2006</option>
              </select>
            </div>
          </td>
        </tr>
      </table>
</html>
长期阅读，第一次询问

    <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3-legend/1.9.0/d3-legend.min.js"></script>

    <body>
      <!-- Table to hold the Divs -->
      <table border="0" cellpadding="10" style="overflow-y: scroll;">
        <tr>
          <td>
            <div id="table_container" class="csvTable"></div>
          </td>
          <td>
            <div id="map_container"></div>
          </td>
          <td>
            <div id="d3legend" class="legend"></div>
          </td>
          <td>
            <div class="styled-select">
              <select id="data_sources" name="data_sources">
                <option value="regionalDistrictData.csv" selected>Census 1996 Data</option>
                <option value="regionalDistrictData2.csv">Census 2001 Data</option>
                <option value="regionalDistrictData3.csv">Census 2006</option>
              </select>
            </div>
          </td>
        </tr>
      </table>
</html>
我早期的搜索把我带到了这个bl.ock

    <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3-legend/1.9.0/d3-legend.min.js"></script>

    <body>
      <!-- Table to hold the Divs -->
      <table border="0" cellpadding="10" style="overflow-y: scroll;">
        <tr>
          <td>
            <div id="table_container" class="csvTable"></div>
          </td>
          <td>
            <div id="map_container"></div>
          </td>
          <td>
            <div id="d3legend" class="legend"></div>
          </td>
          <td>
            <div class="styled-select">
              <select id="data_sources" name="data_sources">
                <option value="regionalDistrictData.csv" selected>Census 1996 Data</option>
                <option value="regionalDistrictData2.csv">Census 2001 Data</option>
                <option value="regionalDistrictData3.csv">Census 2006</option>
              </select>
            </div>
          </td>
        </tr>
      </table>
</html>
真的很酷。所以，我带着密码去上班了。正如你在下面的例子中看到的，我已经让它工作了

    <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3-legend/1.9.0/d3-legend.min.js"></script>

    <body>
      <!-- Table to hold the Divs -->
      <table border="0" cellpadding="10" style="overflow-y: scroll;">
        <tr>
          <td>
            <div id="table_container" class="csvTable"></div>
          </td>
          <td>
            <div id="map_container"></div>
          </td>
          <td>
            <div id="d3legend" class="legend"></div>
          </td>
          <td>
            <div class="styled-select">
              <select id="data_sources" name="data_sources">
                <option value="regionalDistrictData.csv" selected>Census 1996 Data</option>
                <option value="regionalDistrictData2.csv">Census 2001 Data</option>
                <option value="regionalDistrictData3.csv">Census 2006</option>
              </select>
            </div>
          </td>
        </tr>
      </table>
</html>
我已为你把一切都整理好了。jsfiddle.net/Majomo/npya9khq/

    <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3-legend/1.9.0/d3-legend.min.js"></script>

    <body>
      <!-- Table to hold the Divs -->
      <table border="0" cellpadding="10" style="overflow-y: scroll;">
        <tr>
          <td>
            <div id="table_container" class="csvTable"></div>
          </td>
          <td>
            <div id="map_container"></div>
          </td>
          <td>
            <div id="d3legend" class="legend"></div>
          </td>
          <td>
            <div class="styled-select">
              <select id="data_sources" name="data_sources">
                <option value="regionalDistrictData.csv" selected>Census 1996 Data</option>
                <option value="regionalDistrictData2.csv">Census 2001 Data</option>
                <option value="regionalDistrictData3.csv">Census 2006</option>
              </select>
            </div>
          </td>
        </tr>
      </table>
</html>
另外，我被一个红色的盒子警告要在这里发布代码。这让我的帖子很有分量，但红盒子让我这么做了，我不会接受否定的回答。对不起，这是文字墙

    <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3-legend/1.9.0/d3-legend.min.js"></script>

    <body>
      <!-- Table to hold the Divs -->
      <table border="0" cellpadding="10" style="overflow-y: scroll;">
        <tr>
          <td>
            <div id="table_container" class="csvTable"></div>
          </td>
          <td>
            <div id="map_container"></div>
          </td>
          <td>
            <div id="d3legend" class="legend"></div>
          </td>
          <td>
            <div class="styled-select">
              <select id="data_sources" name="data_sources">
                <option value="regionalDistrictData.csv" selected>Census 1996 Data</option>
                <option value="regionalDistrictData2.csv">Census 2001 Data</option>
                <option value="regionalDistrictData3.csv">Census 2006</option>
              </select>
            </div>
          </td>
        </tr>
      </table>
</html>
html 

    <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3-legend/1.9.0/d3-legend.min.js"></script>

    <body>
      <!-- Table to hold the Divs -->
      <table border="0" cellpadding="10" style="overflow-y: scroll;">
        <tr>
          <td>
            <div id="table_container" class="csvTable"></div>
          </td>
          <td>
            <div id="map_container"></div>
          </td>
          <td>
            <div id="d3legend" class="legend"></div>
          </td>
          <td>
            <div class="styled-select">
              <select id="data_sources" name="data_sources">
                <option value="regionalDistrictData.csv" selected>Census 1996 Data</option>
                <option value="regionalDistrictData2.csv">Census 2001 Data</option>
                <option value="regionalDistrictData3.csv">Census 2006</option>
              </select>
            </div>
          </td>
        </tr>
      </table>
</html>
js

    <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3-legend/1.9.0/d3-legend.min.js"></script>

    <body>
      <!-- Table to hold the Divs -->
      <table border="0" cellpadding="10" style="overflow-y: scroll;">
        <tr>
          <td>
            <div id="table_container" class="csvTable"></div>
          </td>
          <td>
            <div id="map_container"></div>
          </td>
          <td>
            <div id="d3legend" class="legend"></div>
          </td>
          <td>
            <div class="styled-select">
              <select id="data_sources" name="data_sources">
                <option value="regionalDistrictData.csv" selected>Census 1996 Data</option>
                <option value="regionalDistrictData2.csv">Census 2001 Data</option>
                <option value="regionalDistrictData3.csv">Census 2006</option>
              </select>
            </div>
          </td>
        </tr>
      </table>
</html>

 // Based on http://public.johnnyotoole.fastmail.fm/county_map.html
 // Based on http://bl.ocks.org/mbostock/4699541

 //Width and height
 var w = 600;
 var h = 750;
 var active;
 var jsonOutside;

 //Define map projection NB change to albers and changed zoom etc
 var projection = d3.geo.albers()
   .center([-3.5, 43.4])
   .rotate([121, -11])
   .scale(2400)
   .translate([w / 2, h / 2]);

 //Define path generator
 var path = d3.geo.path()
   .projection(projection);

 //Create SVG element
 var svg = d3.select("#map_container")
   .append("svg")
   .attr("width", w)
   .attr("height", h);

 // from colorbrewer (http://colorbrewer2.org/)
 //var colours = ["#BAE4B3", "#74C476", "#31A354", "#006D2C"];
 //var colours = ["#fef0d9", "#fdcc8a", "#fc8d59", "#d7301f"];

 // setup colours for choropleth
 var colScale = d3.scale.quantile()
   .domain([1.2, 1.5, 2])
   .range(['#edf8fb', '#b3cde3', '#8c96c6', '#8856a7', '#810f7c']);


 var dropdown = d3.select("#data_sources")
 var change = function() {
   var source = dropdown.node().options[dropdown.node().selectedIndex].value;
   d3.csv(source, function(csv) {
     //continue doing stuff here.
   })
 }

 dropdown.on("change", change)
 change(); //trigger json on load

 svg.append("rect")
   .attr("width", w)
   .attr("height", h)
   .on("click", reset);

 var g = svg.append("g");


 //Load in CSV data
 d3.csv(src = "https://gist.githubusercontent.com/majomo/2d5409622ff825ad932d/raw/5a37026b6c11d129a6eb1bcd32ef2a23d8833770/regDistBC.csv", function(data) {

   //Load in GeoJSON data
   d3.json(src = "https://gist.githubusercontent.com/majomo/1beba4e212d12f3d6e29/raw/1bd280591bc4959449505395c90f7ffdd2e2ddbd/bcGeo.json", function(json) {

     // join csv data with json data and create
     json.features.forEach(function(d, i) {
       data.forEach(function(e, j) {
         if (d.properties.CDNAME === e.Region) {
           d.properties.value = +e.Result;
         };
       })
     })

     jsonOutside = json; // pass json to a global so tableRowClicked has access

     var columns = ["Region", "Result"];
     var table = d3.select("#table_container").append("table"),
       thead = table.append("thead"),
       tbody = table.append("tbody");

     // append the header row
     thead.append("tr")
       .selectAll("th")
       .data(columns)
       .enter()
       .append("th")
       .text(function(column) {
         return column;
       });

     // create a row for each object in the data
     var rows = tbody.selectAll("tr")
       .data(data)
       .enter()
       .append("tr");

     // create a cell in each row for each column
     var cells = rows.selectAll("td")
       .data(function(row) {
         return columns.map(function(column) {
           return {
             column: column,
             value: row[column]
           };
         });
       })
       .enter()
       .append("td")
       .text(function(d) {
         return d.value;
       })
       .on("click", function(d) {
         tableRowClicked(d);
       }); // added on click eventto td         element NB you need to click on the cell with the conuty name

     // add extents (max and min) from data results for choropleth
     colScale.domain(d3.extent(data, function(d) {
       return d.Result;
     }));

     //Bind data and create one path per GeoJSON feature
     g.selectAll("path")
       .data(json.features)
       .enter()
       .append("path")
       .attr("d", path)
       .attr("class", "feature")
       .attr("id", function(d) {
         return d.properties.CDNAME;
       }) // added id so click could work on id which is common between the json and csv data
       .on("click", function(d) {
         click(d);
       })
       .style("stroke", "gray")
       .style("fill", function(d, i) {
         return colScale(d.properties.value);
       }); // fill based on colour scale

     g.append("path")
       .data(json.features)
       .enter()
       .append("path")
       .attr("class", "mesh")
       .attr("d", path);
   });

 });

 function click(d) {

   if (active === d) return reset();
   g.selectAll(".active").classed("active", false);
   d3.select("#" + d.properties.CDNAME).classed("active", active = d); // changed selection to id

   var b = path.bounds(d);

   g.transition().duration(750).attr("transform",
     "translate(" + projection.translate() + ")" + "scale(" + .95 / Math.max((b[1][0] - b[0][0]) / w, (b[1][1] - b[0][1]) / h) + ")" + "translate(" + -(b[1][0] + b[0][0]) / 2 + "," + -(b[1][1] + b[0][1]) / 2 + ")");
 }

 function reset() {
   g.selectAll(".active").classed("active", active = false);
   g.transition().duration(750).attr("transform", "");
 }

 function tableRowClicked(x) {

   jsonOutside.features.forEach(function(d) { // loop through json data to match td entry
     if (x.value === d.properties.CDNAME) {
       var region = d;
       click(d); // pass json element that matches td data to click
     };
   })
 };
到目前为止，它看起来很棒，但我现在迷路了

    <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3-legend/1.9.0/d3-legend.min.js"></script>

    <body>
      <!-- Table to hold the Divs -->
      <table border="0" cellpadding="10" style="overflow-y: scroll;">
        <tr>
          <td>
            <div id="table_container" class="csvTable"></div>
          </td>
          <td>
            <div id="map_container"></div>
          </td>
          <td>
            <div id="d3legend" class="legend"></div>
          </td>
          <td>
            <div class="styled-select">
              <select id="data_sources" name="data_sources">
                <option value="regionalDistrictData.csv" selected>Census 1996 Data</option>
                <option value="regionalDistrictData2.csv">Census 2001 Data</option>
                <option value="regionalDistrictData3.csv">Census 2006</option>
              </select>
            </div>
          </td>
        </tr>
      </table>
</html>
如您所见，我创建了一个html下拉列表，我想用它来控制加载的数据集。我已经搜索并找到了使我走到这一步的答案。我有3个不同数据的csv文件，我正试图使用下拉菜单选择每一个。 我正在研究的答案/网站都提供了这方面的一些变体

    <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3-legend/1.9.0/d3-legend.min.js"></script>

    <body>
      <!-- Table to hold the Divs -->
      <table border="0" cellpadding="10" style="overflow-y: scroll;">
        <tr>
          <td>
            <div id="table_container" class="csvTable"></div>
          </td>
          <td>
            <div id="map_container"></div>
          </td>
          <td>
            <div id="d3legend" class="legend"></div>
          </td>
          <td>
            <div class="styled-select">
              <select id="data_sources" name="data_sources">
                <option value="regionalDistrictData.csv" selected>Census 1996 Data</option>
                <option value="regionalDistrictData2.csv">Census 2001 Data</option>
                <option value="regionalDistrictData3.csv">Census 2006</option>
              </select>
            </div>
          </td>
        </tr>
      </table>
</html>

var dropdown = d3.select("#data_sources")
var change = function() {
  var source = dropdown.node().options[dropdown.node().selectedIndex].value;
  d3.csv(source, function(csv) {
     //continue doing stuff here.
  })
}

dropdown.on("change", change)
change(); //trigger json on load
我的问题是，当我尝试这种方法时，我一无所获。我从上面的代码中删除了它，因为我甚至不知道它什么时候属于我。我最担心的是有一张桌子和一张地图，我不知道去哪里工作

    <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3-legend/1.9.0/d3-legend.min.js"></script>

    <body>
      <!-- Table to hold the Divs -->
      <table border="0" cellpadding="10" style="overflow-y: scroll;">
        <tr>
          <td>
            <div id="table_container" class="csvTable"></div>
          </td>
          <td>
            <div id="map_container"></div>
          </td>
          <td>
            <div id="d3legend" class="legend"></div>
          </td>
          <td>
            <div class="styled-select">
              <select id="data_sources" name="data_sources">
                <option value="regionalDistrictData.csv" selected>Census 1996 Data</option>
                <option value="regionalDistrictData2.csv">Census 2001 Data</option>
                <option value="regionalDistrictData3.csv">Census 2006</option>
              </select>
            </div>
          </td>
        </tr>
      </table>
</html>
这么说吧，我想知道， 对于我想要实现的目标，这种方法可行吗？ 如果没有，有没有办法做到这一点

    <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3-legend/1.9.0/d3-legend.min.js"></script>

    <body>
      <!-- Table to hold the Divs -->
      <table border="0" cellpadding="10" style="overflow-y: scroll;">
        <tr>
          <td>
            <div id="table_container" class="csvTable"></div>
          </td>
          <td>
            <div id="map_container"></div>
          </td>
          <td>
            <div id="d3legend" class="legend"></div>
          </td>
          <td>
            <div class="styled-select">
              <select id="data_sources" name="data_sources">
                <option value="regionalDistrictData.csv" selected>Census 1996 Data</option>
                <option value="regionalDistrictData2.csv">Census 2001 Data</option>
                <option value="regionalDistrictData3.csv">Census 2006</option>
              </select>
            </div>
          </td>
        </tr>
      </table>
</html>
提前感谢您提供的任何指导

为了能够更改图形的数据源，您需要能够分离初始化阶段，该阶段将构建和绘制所有数据源共有的图表元素，以及依赖于您的数据的元素的实际绘图。在这里，看起来所有图表都有很多共同点，因为您将可视化相同地理区域的不同值

    <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3-legend/1.9.0/d3-legend.min.js"></script>

    <body>
      <!-- Table to hold the Divs -->
      <table border="0" cellpadding="10" style="overflow-y: scroll;">
        <tr>
          <td>
            <div id="table_container" class="csvTable"></div>
          </td>
          <td>
            <div id="map_container"></div>
          </td>
          <td>
            <div id="d3legend" class="legend"></div>
          </td>
          <td>
            <div class="styled-select">
              <select id="data_sources" name="data_sources">
                <option value="regionalDistrictData.csv" selected>Census 1996 Data</option>
                <option value="regionalDistrictData2.csv">Census 2001 Data</option>
                <option value="regionalDistrictData3.csv">Census 2006</option>
              </select>
            </div>
          </td>
        </tr>
      </table>
</html>
完成后，所有常用内容的代码只需运行一次，其余部分可以放在一个以数据为参数的函数中。每次您想要刷新数据源时，只需使用新数据调用此函数

    <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3-legend/1.9.0/d3-legend.min.js"></script>

    <body>
      <!-- Table to hold the Divs -->
      <table border="0" cellpadding="10" style="overflow-y: scroll;">
        <tr>
          <td>
            <div id="table_container" class="csvTable"></div>
          </td>
          <td>
            <div id="map_container"></div>
          </td>
          <td>
            <div id="d3legend" class="legend"></div>
          </td>
          <td>
            <div class="styled-select">
              <select id="data_sources" name="data_sources">
                <option value="regionalDistrictData.csv" selected>Census 1996 Data</option>
                <option value="regionalDistrictData2.csv">Census 2001 Data</option>
                <option value="regionalDistrictData3.csv">Census 2006</option>
              </select>
            </div>
          </td>
        </tr>
      </table>
</html>
我对您的JSFIDLE做了一点修改，以向您展示这如何适用于您的案例。这确实不是最佳解决方案，但这应该会让您了解代码的结构。如您所见，我每次都选择删除svg和表中的所有内容，并重新绘制所有内容。最终的updateChart函数可能更智能，在您的情况下，如果区域保持不变，updateChart只需要更新路径的颜色和表格单元格的内部文本

    <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3-legend/1.9.0/d3-legend.min.js"></script>

    <body>
      <!-- Table to hold the Divs -->
      <table border="0" cellpadding="10" style="overflow-y: scroll;">
        <tr>
          <td>
            <div id="table_container" class="csvTable"></div>
          </td>
          <td>
            <div id="map_container"></div>
          </td>
          <td>
            <div id="d3legend" class="legend"></div>
          </td>
          <td>
            <div class="styled-select">
              <select id="data_sources" name="data_sources">
                <option value="regionalDistrictData.csv" selected>Census 1996 Data</option>
                <option value="regionalDistrictData2.csv">Census 2001 Data</option>
                <option value="regionalDistrictData3.csv">Census 2006</option>
              </select>
            </div>
          </td>
        </tr>
      </table>
</html>
jsfiddle.net/jwd2ded9/7/

    <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3-legend/1.9.0/d3-legend.min.js"></script>

    <body>
      <!-- Table to hold the Divs -->
      <table border="0" cellpadding="10" style="overflow-y: scroll;">
        <tr>
          <td>
            <div id="table_container" class="csvTable"></div>
          </td>
          <td>
            <div id="map_container"></div>
          </td>
          <td>
            <div id="d3legend" class="legend"></div>
          </td>
          <td>
            <div class="styled-select">
              <select id="data_sources" name="data_sources">
                <option value="regionalDistrictData.csv" selected>Census 1996 Data</option>
                <option value="regionalDistrictData2.csv">Census 2001 Data</option>
                <option value="regionalDistrictData3.csv">Census 2006</option>
              </select>
            </div>
          </td>
        </tr>
      </table>
</html>