小贝子编程

D3将可见性属性连接到滑块位置



大家好，我目前正在尝试更改4行的可见性，这取决于滑块位置是否与我的数据相同。例如：我希望第3行的价值" 1994"存储到只要滑块处于位置" 1994"，才能看到。我还没有滑动器的工作者，这就是为什么我遇到如此麻烦的原因。这是我的代码的小提琴：https：//fiddle.jshell.net/42jdw2lt/3/

<!DOCTYPE html>
<meta charset="utf-8">
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.2.2/d3.min.js">
</script>
<script src="http://d3js.org/topojson.v1.min.js"></script>
<script src="https://d3js.org/d3-selection-multi.v1.min.js"></script>
<script>
var width = 1500;
var height = 1500;
var margin = {top: 50, left: 50, right: 50, bottom:50},
height = 650-margin.top-margin.bottom,
width = 1200-margin.left-margin.right;
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 strwi = d3.scaleLinear()
          .domain([100, 400])
          .range([7,35])
var group = svg.append("g")
var series = [
[{"x": 360, "y": 250, "num": 100}, {"x": 520, "y": 400, "num": 100}, {"x": 
630, "y": 300, "num": 100, "year": 1991}],
[{"x": 71, "y": 45, "num": 200}, {"x": 32, "y": 39, "num": 200}, {"x": 43, 
"y": 70, "num": 200, "year": 1992}],
 [{"x": 100, "y": 300, "num": 300}, {"x": 200, "y": 200, "num": 300}, {"x": 
 300, "y": 200, "num": 300, "year": 1994}],
 [{"x": 101, "y": 202, "num": 400}, {"x": 102, "y": 204, "num": 400}, {"x": 
 103, "y": 215, "num": 400, "year": 1995}]
 ];
 var line = d3.line()
.curve(d3.curveBasis)
.x(function(d) { return d.x; })
.y(function(d) { return d.y; });

 group.selectAll(".line")
    .data(series)
  .enter().append("path")
    .attr("class", "line")
   // .attr("visibility", "hidden")
    .attr("stroke-width", function(d) {return strwi(d); })
    .attr("stroke", "black")
  .attr("fill", "none")
    .attr("d", line);
   var data = [1990, 1991, 1992, 1993, 1994, 1995, 1996, 1997, 1998, 1999, 
   2000, 2001, 2002]
   var x = d3.scaleLinear()
        .domain(d3.extent(data))
        .range([0, width])
        .clamp(true);
   var slider = svg.append("g")
        .attr("class", "slider")
        .attr("transform", "translate(" + 0 + "," + 300 + ")");
   slider.append("line")
        .attr("class", "track")
        .attr("x1", x.range()[0])
        .attr("x2", x.range()[1])
        .attr("stroke", "black")
        .attr("stroke-width", "4")
      .select(function() { return 
      this.parentNode.appendChild(this.cloneNode(true)); })
        .attr("class", "track-inset")
    .select(function() { return 
     this.parentNode.appendChild(this.cloneNode(true)); })
        .attr("class", "track-overlay")
        .call(d3.drag()
                .on("start.interrupt", function() { slider.interrupt(); })
                .on("start drag", function() { hue(x.invert(d3.event.x)); 
   }));
 slider.insert("g", ".track-overlay")
        .attr("class", "ticks")
    .selectAll("ticks")
    .data(x.ticks(data.length))
    .enter().append("text")
        .attr("x", x)
        .attr("text-anchor", "middle")
        .attr("transform", "translate(0," + 30 + ")")
        .text(function(d) { return d; })
    .exit()
    .data(x.ticks(data.length * 2))
    .enter().append("circle")
        .attr("cx", x)
        .attr("r", 3)
        .attr("fill", "#c1c7cd");
  slider.insert("g", ".track-overlay")
        .attr("class", "ticks--cirlces")
    .selectAll("ticks--ticks");
  var handle = slider.insert("circle", ".track-overlay")
        .attr("class", "handle")
        .attr("r", 9);
  slider.transition() // Gratuitous intro!
        .duration(750)
        .tween("hue", function() {
            var i = d3.interpolate(0, 70);
            return function(t) { hue(i(t)); };
        });
  function hue(h) {
    handle.attr("cx", x(h));
    d3.select(".text")
        .text( (Math.round(h*2)/2).toFixed(1) );
  }
  </script>

我将prop year添加到数据中的所有元素中，在一个称为 paths的变量中选择所有线路路径，以便当您移动滑块(如This this 

var paths = group.selectAll(".line")
      .data(series)
      .enter().append("path")
      .attr("class", "line")
      // .attr("visibility", "hidden")
      .attr("stroke-width", function(d) {
        return strwi(d);
      })
      .attr("stroke", "black")
      .attr("fill", "none")
      .attr("d", line);

，然后在您的hue函数中，我添加了此代码以根据您的滑块更改不透明度

paths.attr('opacity', function(d) {
        if (((Math.round(h * 2) / 2).toFixed(1)) > d[2]['year']) {
          return 0;
        } else {
          return 1;
        }
      })

这是您的小提琴：

var width = 1500;
var height = 1500;
var margin = {
    top: 50,
    left: 50,
    right: 50,
    bottom: 50
  },
  height = 650 - margin.top - margin.bottom,
  width = 1200 - margin.left - margin.right;
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 strwi = d3.scaleLinear()
  .domain([100, 400])
  .range([7, 35])
var group = svg.append("g")
var series = [
  [{
    "x": 360,
    "y": 250,
    "num": 100,
    "startYear": 1991,
    "endYear": 1995
  }, {
    "x": 520,
    "y": 400,
    "num": 100,
    "startYear": 1991,
    "endYear": 1995
  }, {
    "x": 630,
    "y": 300,
    "num": 100,
    "startYear": 1991,
    "endYear": 1995
  }],
  [{
    "x": 71,
    "y": 45,
    "num": 200,
    "startYear": 1992,
    "endYear": 1993
  }, {
    "x": 32,
    "y": 39,
    "num": 200,
    "startYear": 1992,
    "endYear": 1993
  }, {
    "x": 43,
    "y": 70,
    "num": 200,
    "startYear": 1992,
    "endYear": 1993
  }],
  [{
    "x": 100,
    "y": 300,
    "num": 300,
    "startYear": 1994,
    "endYear": 1996
  }, {
    "x": 200,
    "y": 200,
    "num": 300,
    "startYear": 1994,
    "endYear": 1996
  }, {
    "x": 300,
    "y": 200,
    "num": 300,
    "startYear": 1994,
    "endYear": 1996
  }],
  [{
    "x": 101,
    "y": 202,
    "num": 400,
    "startYear": 1995,
    "endYear": 1997
  }, {
    "x": 102,
    "y": 204,
    "num": 400,
    "startYear": 1995,
    "endYear": 1997
  }, {
    "x": 103,
    "y": 215,
    "num": 400,
    "startYear": 1995,
    "endYear": 1997
  }]
];
var line = d3.line()
  .curve(d3.curveBasis)
  .x(function(d) {
    return d.x;
  })
  .y(function(d) {
    return d.y;
  });
var paths = group.selectAll(".line")
  .data(series)
  .enter().append("path")
  .attr("class", "line")
  .attr('v1',function(d){
  	return d[2]['startYear'];
  })
  .attr('v2',function(d) {
		return d[2]['endYear'];
})
.attr('opacity',0)
  //.attr("visibility", "hidden")
  .attr("stroke-width", function(d) {
    return strwi(d);
  })
  .attr("stroke", "black")
  .attr("fill", "none")
  .attr("d", line);
var data = [1990, 1991, 1992, 1993, 1994, 1995, 1996, 1997, 1998, 1999, 2000, 2001, 2002]
var x = d3.scaleLinear()
  .domain(d3.extent(data))
  .range([0, width])
  .clamp(true);
var slider = svg.append("g")
  .attr("class", "slider")
  .attr("transform", "translate(" + 0 + "," + 300 + ")");
slider.insert("g", ".track-overlay")
  .attr("class", "ticks")
  .selectAll("ticks")
  .data(x.ticks(data.length))
  .enter().append("text")
  .attr("x", x)
  .attr("text-anchor", "middle")
  .attr("transform", "translate(0," + 30 + ")")
  .text(function(d) {
    return d;
  })
  .exit()
  .data(x.ticks(data.length * 2))
  .enter().append("circle")
  .attr("cx", x)
  .attr("r", 3)
  .attr("fill", "#c1c7cd");
slider.append("line")
  .attr("class", "track")
  .attr("x1", x.range()[0])
  .attr("x2", x.range()[1])
  .attr("stroke", "black")
  .attr("stroke-width", "4")
  .select(function() {
    return this.parentNode.appendChild(this.cloneNode(true));
  })
  .attr("class", "track-inset")
  .select(function() {
    return this.parentNode.appendChild(this.cloneNode(true));
  })
  .attr("class", "track-overlay")
  .call(d3.drag()
    .on("start.interrupt", function() {
      slider.interrupt();
    })
    .on("start drag", function() {
      //console.log(d3.event.x)
      hue(x.invert(d3.event.x));
    }));
slider.insert("g", ".track-overlay")
  .attr("class", "ticks--cirlces")
  .selectAll("ticks--ticks");
var handle = slider.insert("circle", ".track-overlay")
  .attr("class", "handle")
  .attr("r", 9);
slider.transition() // Gratuitous intro!
  .duration(750)
  .tween("hue", function() {
    var i = d3.interpolate(0, 70);
    return function(t) {
      //nsole.log(t)
      hue(i(t));
    };
  });
function hue(h) {
  handle.attr("cx", x(h));
  d3.select(".text")
    .text((Math.round(h * 2) / 2).toFixed(1));
  paths
  .transition().duration(300)
  .attr('opacity', function(d) {
    if (((Math.round(h * 2) / 2).toFixed(1)) >= d[2]['startYear'] && ((Math.round(h * 2) / 2).toFixed(1)) <= d[2]['endYear']) {
      return 1;
    } else {
      return 0;
    }
  })
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.2.2/d3.min.js"></script>
<script src="https://d3js.org/topojson.v1.min.js"></script>
<script src="https://d3js.org/d3-selection-multi.v1.min.js"></script>

让我知道这是您想要的还是还有其他东西。

相关内容

最新更新


热门标签：

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