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

时间：2018-02-11 15:23:25

标签： d3.js slider

嘿伙计们，我目前正在尝试更改4行的可见性，具体取决于滑块位置是否与我的数据中的“年份 - 滴答”相同。 例如：我希望存储值为“1994”的第3行只有在滑块位于“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>

1 个答案:

答案 0 :(得分：0)

我为数据中的所有元素添加了道具year，选择了一个名为paths的变量中的所有线路径，以便我可以像这样移动滑块时更改不透明度

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>

让我知道这是你想要的还是别的。

相关问题
最新问题