मैं d3.js के लिए नया हूं और जब मैं और अधिक सीखने की योजना बना रहा हूं तो यह बहुत अच्छा होगा यदि मुझे इस समस्या पर कुछ विशिष्ट सहायता मिल सके। मैं एक विश्लेषणात्मक कार्य के एक्स-अवरोधन को इंगित करने वाली एक लंबवत रेखा प्लॉट करना चाहता हूं। यह एक बोनस होगा यदि x-अवरोधन को विश्लेषणात्मक रूप से निर्धारित नहीं किया गया था ताकि यह विधि उन कार्यों के लिए काम करे, जिनके x-अवरोधन को हल करना 'कठिन' है।

मेरे पास एक प्लॉट का न्यूनतम उदाहरण है जिसमें मैं लंबवत रेखा जोड़ना चाहता हूं। मैं बस y=x+b की साजिश रच रहा हूं जहां b एक पैरामीटर है जिसे उपयोगकर्ता नियंत्रित कर सकता है।

संपादित करें स्पष्ट करने के लिए, मुझे एक लंबवत svg रेखा चाहिए जिसका एक्स-निर्देशांक फ़ंक्शन के एक्स-अवरोध के समान है (मेरे न्यूनतम उदाहरण में लंबवत रेखा के नीचे स्थिति -b होगी)। और मैं इस वर्टिकल लाइन को उपयोगकर्ता इनपुट के आधार पर अपडेट करना चाहता हूं जो फ़ंक्शन को अपडेट करता है। एक ठोस काली ऊर्ध्वाधर रेखा जैसा कुछ जो फ़ंक्शन के बदलते ही "स्लाइड" हो जाता है।

<!DOCTYPE html>

<head>
  <title>xintercept</title>
  <meta charset="utf-8">
  <style>
    path.line {
      stroke: red;
      stroke-width: 2px;
      fill: none;
    }
  </style>
  <script src="https://d3js.org/d3.v4.min.js"></script>
</head>

<body>
  <div class='chart'>
    <form>
      <fieldset>
        <label>b:</label>
        <input id=b type=range min=-10 max=10 step=.1 oninput='draw()' value=2 />
        <output></output>
      </fieldset>
    </form>
    <svg></svg>
  </div>
  <script>
    // Setup chart dimensions and margins
    var margin = {
      top: 20,
      right: 20,
      bottom: 20,
      left: 20
    };
    var width = 500 - margin.left - margin.right;
    var height = 300 - margin.top - margin.bottom;

    // Setup scales - notice no domain, we'll do that on chart render
    var x = d3.scaleLinear().range([0, width]);
    var y = d3.scaleLinear().range([height, 0]);
    x.domain([-10, 10]);
    y.domain([-10, 10]);

    // Setup line generator
    var line = d3.line()
      .x(function(d) {
        return x(d.x);
      })
      .y(function(d) {
        return y(d.y);
      });

    // Setup svg element
    var svg = d3.select('svg')
      .attr('width', width + margin.left + margin.right)
      .attr('height', height + margin.top + margin.bottom)
      .append('g')
      .attr('transform', 'translate(' + margin.left + ', ' + margin.top + ')');


    // Create axes
    svg.append('g')
      .attr('class', 'axis axis--x')
      .attr('transform', 'translate(0,' + height / 2 + ')')
      .call(d3.axisBottom(x));

    svg.append('g')
      .attr('class', 'axis axis--y')
      .attr('transform', 'translate(' + width / 2 + ',0)')
      .call(d3.axisLeft(y));

    // Draw chart
    function draw() {
      var bNode = document.querySelector('#b');
      var b = bNode.value;
      bNode.parentNode.querySelector('output').textContent = b;

      // Construct data from a, b, c
      var data = d3.range(-10, 10, 0.01).map(function(v) {
        return {
          x: v,
          y: 1 * v + 1 * b
        };
      });

      // JOIN
      var paths = svg.selectAll('path.line')
        .data([data]);

      // ENTER
      paths.enter().append('path')
        .attr('class', 'line')
        // ENTER + UPDATE
        .merge(paths)
        .transition()
        .duration(0)
        .attr('d', line);
    }

    // Draw the initial chart - this will also be called every time we update the sliders
    draw();
  </script>
</body>

</html>
0
mv3 28 फरवरी 2019, 03:27

1 उत्तर

सबसे बढ़िया उत्तर

आप स्लाइडर द्वारा परिभाषित नकारात्मक स्थिति में रेखा को रखने के लिए आपके द्वारा बनाए गए तराजू का उपयोग कर सकते हैं।

यहां आपका थोड़ा संशोधित स्निपेट है। आशा है कि इससे सहायता मिलेगी।

<!DOCTYPE html>

<head>
  <title>xintercept</title>
  <meta charset="utf-8">
  <style>
    path.line {
      stroke: red;
      stroke-width: 2px;
      fill: none;
    }
  </style>
  <script src="https://d3js.org/d3.v4.min.js"></script>
</head>

<body>
  <div class='chart'>
    <form>
      <fieldset>
        <label>b:</label>
        <input id=b type=range min=-10 max=10 step=.1 oninput='draw()' value=2 />
        <output></output>
      </fieldset>
    </form>
    <svg></svg>
  </div>
  <script>
    // Setup chart dimensions and margins
    var margin = {
      top: 20,
      right: 20,
      bottom: 20,
      left: 20
    };
    var width = 500 - margin.left - margin.right;
    var height = 300 - margin.top - margin.bottom;

    // Setup scales - notice no domain, we'll do that on chart render
    var x = d3.scaleLinear().range([0, width]);
    var y = d3.scaleLinear().range([height, 0]);
    x.domain([-10, 10]);
    y.domain([-10, 10]);

    // Setup line generator
    var line = d3.line()
      .x(function(d) {
        return x(d.x);
      })
      .y(function(d) {
        return y(d.y);
      });

    // Setup svg element
    var svg = d3.select('svg')
      .attr('width', width + margin.left + margin.right)
      .attr('height', height + margin.top + margin.bottom)
      .append('g')
      .attr('transform', 'translate(' + margin.left + ', ' + margin.top + ')');


    // Create axes
    svg.append('g')
      .attr('class', 'axis axis--x')
      .attr('transform', 'translate(0,' + height / 2 + ')')
      .call(d3.axisBottom(x));

    svg.append('g')
      .attr('class', 'axis axis--y')
      .attr('transform', 'translate(' + width / 2 + ',0)')
      .call(d3.axisLeft(y));
    
    var verticalLine = svg.append('line');

    // Draw chart
    function draw() {
      var bNode = document.querySelector('#b');
      var b = bNode.value;
      bNode.parentNode.querySelector('output').textContent = b;

      // Construct data from a, b, c
      var data = d3.range(-10, 10, 0.01).map(function(v) {
        return {
          x: v,
          y: 1 * v + 1 * b
        };
      });

      // JOIN
      var paths = svg.selectAll('path.line')
        .data([data]);

      // ENTER
      paths.enter().append('path')
        .attr('class', 'line')
        // ENTER + UPDATE
        .merge(paths)
        .transition()
        .duration(0)
        .attr('d', line);

      // mod here
      verticalLine
        .attr('x1', () => x(-b))
        .attr('x2', () => x(-b))
        .attr('y1', 0)
        .attr('y2', height + margin.top + margin.bottom)
        .attr('stroke', 'green');
    
  }

    // Draw the initial chart - this will also be called every time we update the sliders
    draw();
  </script>
</body>

</html>
0
BrunoFenzl 28 फरवरी 2019, 08:42