Question

您好我有一个D3脚本输出一堆圆环图，我正在寻找一种方法来过滤和搜索我的数据的第一列名称中的关键字。我希望能够做到这一点，并不是想找到一种方法来过滤数据，只是一个搜索栏或其他方式，以允许用户搜索和过滤甜甜圈图表。我最大的问题是将搜索元素合并到d3.csv（）部分我理解如何制作搜索栏并且已经合并了一个我希望能够搜索我的数据的例子。 我做了更多研究，也许使用jquery会有所帮助。

这是我的D3：

<!DOCTYPE html>
    <html>
    <head>
    <title>Search Box Example 1</title>
    <meta name="ROBOTS" content="NOINDEX, NOFOLLOW" />
    <!-- CSS styles for standard search box -->
    <style type="text/css">
      #tfheader{
        background-color:#c3dfef;
      }
      #tfnewsearch{
        float:right;
        padding:20px;
      }
      .tftextinput{
        margin: 0;
        padding: 5px 15px;
        font-family: Arial, Helvetica, sans-serif;
        font-size:14px;
        border:1px solid #0076a3; border-right:0px;
        border-top-left-radius: 5px 5px;
        border-bottom-left-radius: 5px 5px;
      }
      .tfbutton {
        margin: 0;
        padding: 5px 15px;
        font-family: Arial, Helvetica, sans-serif;
        font-size:14px;
        outline: none;
        cursor: pointer;
        text-align: center;
        text-decoration: none;
        color: #ffffff;
        border: solid 1px #0076a3; border-right:0px;
        background: #0095cd;
        background: -webkit-gradient(linear, left top, left bottom, from(#00adee), to(#0078a5));
        background: -moz-linear-gradient(top,  #00adee,  #0078a5);
        border-top-right-radius: 5px 5px;
        border-bottom-right-radius: 5px 5px;
      }
      .tfbutton:hover {
        text-decoration: none;
        background: #007ead;
        background: -webkit-gradient(linear, left top, left bottom, from(#0095cc), to(#00678e));
        background: -moz-linear-gradient(top,  #0095cc,  #00678e);
      }
      /* Fixes submit button height problem in Firefox */
      .tfbutton::-moz-focus-inner {
        border: 0;
      }
      .tfclear{
        clear:both;
      }
    </style>
    </head>
    <body>
      <!-- HTML for SEARCH BAR -->
      <div id="tfheader">
        <form id="tfnewsearch" method="get" action="http://www.google.com">
                <input type="text" class="tftextinput" name="q" size="21" maxlength="120"><input type="submit" value="search" class="tfbutton">
        </form>
      <div class="tfclear"></div>
      </div>
    </body>
    </html>


    <meta charset="utf-8">
    <style>

    body {
      font: 10px sans-serif;
    }

    svg {
      padding: 10px 0 0 10px;
    }

    .arc {
      stroke: #fff;
    }

    </style>
    <body>
    <script src="http://d3js.org/d3.v3.min.js"></script>
    <script>



    var radius = 74,
        padding = 10;

    var color = d3.scale.ordinal()
        .range(["#98abc5", "#8a89a6", "#7b6888", "#6b486b", "#a05d56", "#d0743c", "#2B8429"]);

    var arc = d3.svg.arc()
        .outerRadius(radius)
        .innerRadius(radius - 30);

    var pie = d3.layout.pie()
        .sort(null)
        .value(function(d) { return d.population; });

    d3.csv("data1.csv", function(error, data) {
      color.domain(d3.keys(data[0]).filter(function(key) { return key !== "device"; }));

      data.forEach(function(d) {
        d.ages = color.domain().map(function(name) {
          return {name: name, population: +d[name]};
        });
      });

      var legend = d3.select("body").append("svg")
          .attr("class", "legend")
          .attr("width", radius * 2)
          .attr("height", radius * 2)
        .selectAll("g")
          .data(color.domain().slice().reverse())
        .enter().append("g")
          .attr("transform", function(d, i) { return "translate(0," + i * 20 + ")"; });

      legend.append("rect")
          .attr("width", 18)
          .attr("height", 18)
          .style("fill", color);

      legend.append("text")
          .attr("x", 24)
          .attr("y", 9)
          .attr("dy", ".35em")
          .text(function(d) { return d; });

      var svg = d3.select("body").selectAll(".pie")
          .data(data)
        .enter().append("svg")
          .attr("class", "pie")
          .attr("width", radius * 2)
          .attr("height", radius * 2)
        .append("g")
          .attr("transform", "translate(" + radius + "," + radius + ")");

      svg.selectAll(".arc")
          .data(function(d) { return pie(d.ages); })
        .enter().append("path")
          .attr("class", "arc")
          .attr("d", arc)
          .style("fill", function(d) { return color(d.data.name); });

      svg.append("text")
          .attr("dy", ".35em")
          .style("text-anchor", "middle")
          .text(function(d) { return d.device; });

    var peopleTable = tabulate(data, ["device"]);

    });

    </script>

以下是一些示例数据：

State,Under 5 Years,5 to 13 Years,14 to 17 Years,18 to 24 Years,25 to 44 Years,45 to 64 Years,65 Years and Over
AL,310504,552339,259034,450818,1231572,1215966,641667
AK,52083,85640,42153,74257,198724,183159,50277
AZ,515910,828669,362642,601943,1804762,1523681,862573
AR,202070,343207,157204,264160,754420,727124,407205
CA,2704659,4499890,2159981,3853788,10604510,8819342,4114496
CO,358280,587154,261701,466194,1464939,1290094,511094
CT,211637,403658,196918,325110,916955,968967,478007
DE,59319,99496,47414,84464,230183,230528,121688
DC,36352,50439,25225,75569,193557,140043,70648
FL,1140516,1938695,925060,1607297,4782119,4746856,3187797
GA,740521,1250460,557860,919876,2846985,2389018,981024
HI,87207,134025,64011,124834,356237,331817,190067
ID,121746,201192,89702,147606,406247,375173,182150
IL,894368,1558919,725973,1311479,3596343,3239173,1575308
IN,443089,780199,361393,605863,1724528,1647881,813839
IA,201321,345409,165883,306398,750505,788485,444554
KS,202529,342134,155822,293114,728166,713663,366706
KY,284601,493536,229927,381394,1179637,1134283,565867

我已经看过如何按设定值过滤但希望有搜索栏的示例。请记住，我对D3和JS相对较新。

可搜索的d3圆环图表过滤器

0 个答案: