JQuery 滑块不与 d3 在垂直线上绘制的数据交互

Question

我试图让我的数据与 jQuery 滑块交互。我的数据用钢蓝色的垂直线表示，但 jQuery 滑块仅与浅灰色垂直线 xAxis 交互，因为我使用 xAxis x.axis 及其路径设置它。它只随滑块移动，而不是钢蓝中的实际垂直线。我不能使用 d3 滑块，我被这个 d3 v2 困住了。我问了一个关于垂直线的问题：（How to interact JQuery slider with d3 vertical lines for every data point），但建议对这个滑块问题提出一个单独的问题：（任何输入都会有帮助！这是代码:// define dimensions of graphvar m = [80, 80, 80, 80]; // marginsvar w = 1000 - m[1] - m[3]; // widthvar h = 350 - m[0] - m[2]; // height// create a simple data array that we'll plot with a line (this array represents only the Y values, X will just be the index location)var data = [0];for (var i = 1; i < 50; i++) {  var sign = Math.random() > 0.5 ? +1 : -1;  data.push(data[i - 1] + sign * Math.random());}// X scale will fit all values from data[] within pixels 0-wvar x = d3.scale.linear().domain([0, data.length]).range([0, w]);// Y scale will fit values from 0-10 within pixels h-0 (Note the inverted domain for the y-scale: bigger is up!)var y = d3.scale.linear().domain([d3.min(data), d3.max(data)]).range([h, 0]);// Add an SVG element with the desired dimensions and margin.var graph = d3.select("#graph").append("svg:svg")  .attr("width", w + m[1] + m[3])  .attr("height", h + m[0] + m[2])  .append("svg:g")  .attr("transform", "translate(" + m[3] + "," + m[0] + ")");// create yAxisvar xAxis = d3.svg.axis().scale(x).tickSize(-h).tickSubdivide(3);// Add the x-axis.graph.append("svg:g")  .attr("class", "x axis")  .attr("transform", "translate(0," + h + ")")  .call(xAxis);// create left yAxisvar yAxisLeft = d3.svg.axis().scale(y).ticks(4).orient("left");// Add the y-axis to the leftgraph.append("svg:g")  .attr("class", "y axis")  .attr("transform", "translate(-25,0)")  .call(yAxisLeft);var circle = graph.selectAll("circle")  .data(data);circle.enter()  .append("circle")  .attr("cx", function(d, i) {    return x(i)  })  .attr("cy", function(d) {    return y(d)  })  .attr("class", "circle")  .attr("r", 2)  .attr("fill", "red");

Answer 1

我建议使用d3-brush, 因为它本质上是您想要的，但由 d3 团队为 d3 构建。

但是，如果您不能，我已经在下面使用您的 jQuery 滑块使其工作。您正在摆弄轴刻度，但我建议您重新绘制轴并让 d3 为您完成。每次勾选我都会更新x.domain()，然后调用draw()函数让垂直线和圆重新绘制`并重新绘制 x 轴。我已将域外的所有线条和圆圈的不透明度设置为 0，因此它们被隐藏了。

var m = [40, 80, 40, 80]; // margins

var w = 1000 - m[1] - m[3]; // width

var h = 300 - m[0] - m[2]; // height

var data = [0];

for (var i = 1; i < 50; i++) {

  var sign = Math.random() > 0.5 ? +1 : -1;

  data.push(data[i - 1] + sign * Math.random());

}

var x = d3.scale.linear().domain([0, data.length]).range([0, w]);

var y = d3.scale.linear().domain([d3.min(data), d3.max(data)]).range([h, 0]);

var graph = d3.select("#graph").append("svg:svg")

  .attr("width", w + m[1] + m[3])

  .attr("height", h + m[0] + m[2])

  .append("svg:g")

  .attr("transform", "translate(" + m[3] + "," + m[0] + ")");

var xAxis = d3.svg.axis().scale(x).tickSize(-h).tickSubdivide(3);

var xAxisGroup = graph.append("svg:g")

  .attr("class", "x axis")

  .attr("transform", "translate(0," + h + ")");

var yAxisLeft = d3.svg.axis().scale(y).ticks(4).orient("left");

graph.append("svg:g")

  .attr("class", "y axis")

  .attr("transform", "translate(-25,0)")

  .call(yAxisLeft);

function draw() {

  var circle = graph.selectAll("circle")

    .data(data);

  circle.exit().remove();

  circle.enter()

    .append("circle");

  circle

    .attr("cx", function(d, i) {

      return x(i)

    })

    .attr("cy", function(d) {

      return y(d)

    })

    .attr("opacity", function(d, i) {

      return x.domain()[0] <= i && i <= x.domain()[1] ? 1 : 0;

    })

    .attr("class", "circle")

    .attr("r", 2)

    .attr("fill", "red");

  var verticalLine = graph.selectAll(".vertical-line")

    .data(data);

  verticalLine.exit().remove();

  verticalLine.enter()

    .append("line");

  verticalLine

    .attr("x1", function(d, i) {

      return x(i)

    })

    .attr("x2", function(d, i) {

      return x(i)

    })

    .attr("opacity", function(d, i) {

      return x.domain()[0] <= i && i <= x.domain()[1] ? 1 : 0;

    })

    .attr({

      y1: 0,

      y2: h,

      stroke: 'steelblue',

      class: 'vertical-line'

    });

  xAxisGroup.call(xAxis);

}

draw();

function zoom(begin, end) {

  x.domain([begin, end]);

  draw();

}

$(function() {

  $("#slider-range").slider({

    range: true,

    min: 0,

    max: data.length,

    values: [0, data.length],

    slide: function(event, ui) {

      var begin = d3.min([ui.values[0], data.length]);

      var end = d3.max([ui.values[1], 0]);

      zoom(begin, end);

    }

  });

});

path {

  stroke: steelblue;

  stroke-width: 1;

  fill: none;

}

.axis {

  shape-rendering: crispEdges;

}

.x.axis line {

  stroke: lightgrey;

}

.x.axis .minor {

  stroke-opacity: .5;

}

.x.axis path {

  display: none;

}

.y.axis line,

.y.axis path {

  fill: none;

  stroke: #000;

}

<script src="https://mbostock.github.com/d3/d3.v2.js"></script>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>

<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.min.js"></script>

<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/ui-lightness/jquery-ui.css" type="text/css" media="all" />

<div id="graph" class="aGraph"></div>

<div id="slider-range" style="width: 80%px; margin-left:10%; margin-right:10%"></div>