小贝子编程

选择新的下拉列表筛选器时，图表中的选定线条将保持一致



我正在用一些过滤器绘制折线图。它在第一次加载时按照我想要的方式工作，但当我更改下拉选择时，事情就坏了。

我希望所选状态在下拉选择更改时保持选中状态。现在，如果您在"apples"下拉列表中取消选择Maine，然后切换到"pears"下拉列表，Maine行将返回（尽管选择框保持灰色）

如何维护所选行？

这是一个灌篮器。

代码也在下面。

<!DOCTYPE html>
<meta charset="utf-8">
<style>
body { font: 12px Arial;}
path {
    stroke: #ccc;
    stroke-width: 2;
    fill: none;
}
.axis path,
.axis line {
    fill: none;
    stroke: grey;
    stroke-width: 1;
    shape-rendering: crispEdges;
}
#legendContainer{
    position:absolute;
    top:60px;
    left:10px;
    overflow: auto;
    height:490px;
    width:110px;
}
#legend{
    width:90px;
    height:200px;
}
.legend {
    font-size: 12px;
    font-weight: normal;
    text-anchor: left;
}
.legendcheckbox{
    cursor: pointer;
}
#showAll{
    position:absolute;
    top:600px;
    left:880px;
}
#clearAll{
    position:absolute;
    top:600px;
    left:950px;
}
input{
    border-radius:5px;
    padding:5px 10px;
    background:#999;
    border:0;
    color:#fff;
}
#inds{
    position:absolute;
    top:10px;
    left:10px;
}
</style>
<body>
<!-- load the d3.js library -->
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<select id="inds">
        <option value="apples" selected="selected">apples</option>
        <option value="pears">pears</option>
        <option value="tomatoes">tomatoes</option>
</select>
<div id="legendContainer" class="legendContainer">
    <svg id="legend"></svg>
</div>
<div id="showAll">
    <input name="showAllButton"
     type="button"
     value="Show All"
     onclick="showAll()" />
</div>
<div id="clearAll">
    <input name="clearAllButton"
     type="button"
     value="Clear All"
     onclick="clearAll()" />
</div>
<script>
function filterJSON(json, key, value) {
  var result = [];
  for (var produce in json) {
    if (json[produce][key] === value) {
      result.push(json[produce]);
    }
  }
  return result;
}
// Set the dimensions of the canvas / graph
var margin = {top: 50, right: 20, bottom: 30, left: 160},
    width = 1000 - margin.left - margin.right,
    height = 550 - margin.top - margin.bottom;
// Parse the date / time
var parseDate = d3.time.format("%Y").parse;
// Set the ranges
var x = d3.time.scale().range([0, width]);
var y = d3.scale.linear().range([height, 0]);
// Define the axes
var xAxis = d3.svg.axis().scale(x)
    .orient("bottom").ticks(5);
var yAxis = d3.svg.axis().scale(y)
    .orient("left").ticks(5);
// Define the line
var stateline = d3.svg.line()
        .interpolate("cardinal")
    .x(function(d) { return x(d.year); })
    .y(function(d) { return y(d.value); });
// Adds the svg canvas
var svg = d3.select("body")
    .append("svg")
        .attr("width", width + margin.left + margin.right)
        .attr("height", height + margin.top + margin.bottom)
    .append("g")
        .attr("transform",
              "translate(" + margin.left + "," + margin.top + ")");
var data;
// Get the data
d3.json("data.json", function(error, json) {
  console.log("json", json);
  json.forEach(function(d) {
        d.value = +d.value;
  });
    d3.select('#inds')
            .on("change", function () {
                var sect = document.getElementById("inds");
                var section = sect.options[sect.selectedIndex].value;

                data = filterJSON(json, 'produce', section);
                updateGraph(data);

                jQuery('h1.page-header').html(section);
            });
            // generate initial graph
            data = filterJSON(json, 'produce', 'apples');
            updateGraph(data);
});
var color = d3.scale.ordinal().range(["#48A36D",  "#0096ff", "#ff007e"]);
function updateGraph(data) {
    data.forEach(function(d) {
            d.value = +d.value;
            d.year = parseDate(String(d.year));
            d.active = true;
        });
    // Scale the range of the data
    x.domain(d3.extent(data, function(d) { return d.year; }));
    y.domain([d3.min(data, function(d) { return d.value; }), d3.max(data, function(d) { return d.value; })]);
    // Nest the entries by state
    dataNest = d3.nest()
        .key(function(d) {return d.state;})
        .entries(data);
        var state = svg.selectAll("path")
      .data(dataNest);
        state.enter().append("path")
            .attr("class", "line");
        state.transition()
            .style("stroke", function(d,i) { return d.color = color(d.key); })
            .attr("id", function(d){ return 'tag'+d.key.replace(/s+/g, '');}) // assign ID
            .attr("d", function(d){
                if (d.active = true){return stateline(d.values) }
                else{ return null;}
            });
        state.exit().remove();
        var legend = d3.select("#legend")
            .selectAll("text")
            .data(dataNest);
        //checkboxes
        legend.enter().append("rect")
          .attr("width", 10)
          .attr("height", 10)
          .attr("x", 0)
          .attr("y", function (d, i) { return 0 +i*15; })  // spacing
          .attr("fill",function(d) { if (d.active == true){ return color(d.key);} else {return "#ccc";}})
          .attr("class", "legendcheckbox")
            .on("click", function(d){
                d.active = !d.active;
                // Hide or show the lines based on the ID
                d3.select("#tag"+d.key)
                            .transition().duration(100)
                            .attr("d", function(d){
                if (d.active == true){return stateline(d.values);} else {return null;}
                          });
                        // fill checkbox color or not
                        d3.select(this).attr("fill",function(d) {
                            if (d.active == true){ return color(d.key);}
                            else {return "#ccc";}});
                });
    // Add the Legend text
    legend.enter().append("text")
      .attr("x", 15)
      .attr("y", function(d,i){return 10 +i*15;})
      .attr("class", "legend");
        legend.transition()
      .style("fill", "#777" )
      .text(function(d){return d.key;});
        legend.exit().remove();
        svg.selectAll(".axis").remove();
    // Add the X Axis
    svg.append("g")
        .attr("class", "x axis")
        .attr("transform", "translate(0," + height + ")")
        .call(xAxis);
    // Add the Y Axis
    svg.append("g")
        .attr("class", "y axis")
        .call(yAxis);
};
function clearAll(){
  d3.selectAll(".line")
    .transition().duration(100)
            .attr("d", function(d){
        return null;
      });
  d3.select("#legend").selectAll("rect")
  .transition().duration(100)
      .attr("fill", "#ccc");
};
function showAll(){
  d3.selectAll(".line")
    .transition().duration(100)
            .attr("d", function(d){
        return stateline(d.values);
      });
  d3.select("#legend").selectAll("rect")
  .attr("fill",function(d) {
    if (d.active == true){
       return color(d.key);
     }
   })
};
</script>
</body>

这是data.json文件：

[
{
  "state":"Maine",
  "produce":"apples",
  "year":1900,
  "value":"131"
},
{
  "state":"Maine",
  "produce":"apples",
  "year":1950,
  "value":"231"
},
{
  "state":"Maine",
  "produce":"apples",
  "year":2000,
  "value":"191"
},
{
  "state":"Maine",
  "produce":"apples",
  "year":2015,
  "value":"302"
},
{
  "state":"Pennsylvania",
  "produce":"apples",
  "year":1900,
  "value":"31"
},
{
  "state":"Pennsylvania",
  "produce":"apples",
  "year":1950,
  "value":"331"
},
{
  "state":"Pennsylvania",
  "produce":"apples",
  "year":2000,
  "value":"291"
},
{
  "state":"Pennsylvania",
  "produce":"apples",
  "year":2015,
  "value":"250"
},
{
  "state":"Ohio",
  "produce":"apples",
  "year":1900,
  "value":"11"
},
{
  "state":"Ohio",
  "produce":"apples",
  "year":1950,
  "value":"230"
},
{
  "state":"Ohio",
  "produce":"apples",
  "year":2000,
  "value":"185"
},
{
  "state":"Ohio",
  "produce":"apples",
  "year":2015,
  "value":"310"
},
{
  "state":"Maine",
  "produce":"pears",
  "year":1900,
  "value":"171"
},
{
  "state":"Maine",
  "produce":"pears",
  "year":1950,
  "value":"121"
},
{
  "state":"Maine",
  "produce":"pears",
  "year":2000,
  "value":"231"
},
{
  "state":"Maine",
  "produce":"pears",
  "year":2015,
  "value":"202"
},
{
  "state":"Pennsylvania",
  "produce":"pears",
  "year":1900,
  "value":"73"
},
{
  "state":"Pennsylvania",
  "produce":"pears",
  "year":1950,
  "value":"151"
},
{
  "state":"Pennsylvania",
  "produce":"pears",
  "year":2000,
  "value":"399"
},
{
  "state":"Pennsylvania",
  "produce":"pears",
  "year":2015,
  "value":"140"
},
{
  "state":"Ohio",
  "produce":"pears",
  "year":1900,
  "value":"146"
},
{
  "state":"Ohio",
  "produce":"pears",
  "year":1950,
  "value":"130"
},
{
  "state":"Ohio",
  "produce":"pears",
  "year":2000,
  "value":"195"
},
{
  "state":"Ohio",
  "produce":"pears",
  "year":2015,
  "value":"210"
},
{
  "state":"Maine",
  "produce":"tomatoes",
  "year":1900,
  "value":"71"
},
{
  "state":"Maine",
  "produce":"tomatoes",
  "year":1950,
  "value":"221"
},
{
  "state":"Maine",
  "produce":"tomatoes",
  "year":2000,
  "value":"31"
},
{
  "state":"Maine",
  "produce":"tomatoes",
  "year":2015,
  "value":"102"
},
{
  "state":"Pennsylvania",
  "produce":"tomatoes",
  "year":1900,
  "value":"173"
},
{
  "state":"Pennsylvania",
  "produce":"tomatoes",
  "year":1950,
  "value":"194"
},
{
  "state":"Pennsylvania",
  "produce":"tomatoes",
  "year":2000,
  "value":"195"
},
{
  "state":"Pennsylvania",
  "produce":"tomatoes",
  "year":2015,
  "value":"230"
},
{
  "state":"Ohio",
  "produce":"tomatoes",
  "year":1900,
  "value":"216"
},
{
  "state":"Ohio",
  "produce":"tomatoes",
  "year":1950,
  "value":"184"
},
{
  "state":"Ohio",
  "produce":"tomatoes",
  "year":2000,
  "value":"125"
},
{
  "state":"Ohio",
  "produce":"tomatoes",
  "year":2015,
  "value":"150"
}
];

更新了Plunker的工作

  1. 用于划线的dataNest在数组中始终包含三个元素：

    dataNest=d3.nest（）.key（函数（d）｛return d.state；｝）.条目（数据）；

来自filterJSON函数的data包括用于一个特定产品的3个状态。这就是为什么即使图例选择器切换，图表上也会有三行。因此，需要做的是确保用于生成路径的数据不仅与产品匹配，而且与状态（图例选择器）匹配，比如：

var result = dataNest.filter(function(val,idx, arr){
  return $("." + val.key).attr("fill") !== "#ccc" 
  // matching the data with selector status
})
var state = svg.selectAll("path")
  .data(result, function(d){return d.key});

同时，更新图例选择器如下：

.attr("class", function(d,i){
        return "legendcheckbox " + d.key
      })

以便路径的数据与选定的图例相匹配。

  1. 通过键函数将线条元素与数据绑定，这样当您单击图例选择器时，它会找到相应的元素。例如：

    var state=svg.selectAll（".line"）.data（结果，函数（d）｛return d.key｝）；

在这里，我们通过每个key将DOM元素与数据绑定，特别是状态。

  1. 每次更新都有一个处理年份数据的步骤：

    data.forEach（函数（d）{d.value=+d.value；d.year=parseDate（字符串（d.year））；d.active=真；})；

如果我们使用数据绑定方法来处理一个特定行的存在，我们应该小心，因为d.year可能已经被处理了，这将导致d.year是null。至于在轴上显示标准格式，我认为更安全的方法是在xAxis:中设置格式

var xAxis = d3.svg.axis().scale(x)
.orient("bottom").ticks(5)
.tickFormat(d3.time.format("%Y"))

这样，您就不必担心更改原始数据，并且可以根据需要显示时间格式。

相关内容

最新更新


热门标签：

javascript python java c# php android html jquery c++ css ios sql mysql arrays asp.net json python-3.x ruby-on-rails .net sql-server django objective-c excel regex ruby linux ajax iphone xml vba spring asp.net-mvc database wordpress string postgresql wpf windows xcode bash git oracle list vb.net multithreading eclipse algorithm macos powershell visual-studio image forms numpy scala function api selenium