मैं अपने डेटा को jQuery स्लाइडर से बातचीत करने की कोशिश कर रहा हूं। मेरा डेटा स्टीलब्लू में लंबवत रेखाओं के साथ दर्शाया गया है, लेकिन jQuery स्लाइडर केवल हल्के भूरे रंग की लंबवत रेखाओं xAxis के साथ इंटरैक्ट करता है क्योंकि मैंने इसे xAxis x.axis और इसके पथ के साथ सेट किया है। यह केवल स्लाइडर के साथ चलता है, लेकिन स्टीलब्लू में वास्तविक लंबवत रेखाएं नहीं। मैं d3 स्लाइडर का उपयोग नहीं कर सकता और मैं इस d3 v2. मैंने लंबवत रेखा के संबंध में एक प्रश्न पूछा: (हर डेटा बिंदु के लिए d3 लंबवत रेखाओं के साथ JQuery स्लाइडर को कैसे इंटरैक्ट करें), लेकिन इस स्लाइडर मुद्दे पर एक अलग प्रश्न पूछने की सिफारिश की गई थी :( कोई इनपुट मदद करेगा! यहां कोड है:

// define dimensions of graph
var m = [80, 80, 80, 80]; // margins
var w = 1000 - m[1] - m[3]; // width
var 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-w
var 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 yAxis
var 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 yAxis
var yAxisLeft = d3.svg.axis().scale(y).ticks(4).orient("left");
// Add the y-axis to the left
graph.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");

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

verticalLine.enter()
  .append("line")
  .attr("x1", function(d, i) {
    return x(i)
  })
  .attr("x2", function(d, i) {
    return x(i)
  })
  .attr({
    y1: 0,
    y2: h,
    stroke: 'steelblue',
    class: 'vertical-line'
  });

function zoom(begin, end) {
  x.domain([begin, end - 1]);

  var t = graph.transition().duration(0);

  var size = end - begin;
  var step = size / 10;
  var ticks = [];
  for (var i = 0; i <= 10; i++) {
    ticks.push(Math.floor(begin + step * i));
  }

  xAxis.tickValues(ticks);

  t.select(".x.axis").call(xAxis);
  t.select('.path').attr("d", verticalLine);
}

$(function() {
  $("#slider-range").slider({
    range: true,
    min: 0,
    max: 1000,
    values: [0, 1000],
    slide: function(event, ui) {
      var begin = d3.min([ui.values[0], data.length]);
      var end = d3.max([ui.values[1], 0]);
      console.log("begin:", begin, "end:", end);

      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>
1
Bebe 17 अक्टूबर 2020, 20:51

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>
0
Ruben Helsloot 19 अक्टूबर 2020, 08:35