1

您好，我有一个 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 比较陌生。

4

0 回答 0