Обновление диаграммы d3 с данными из формы

Ищите поближе и поможем в этом, но не можете найти что-либо достаточно близко.Обновление диаграммы d3 с данными из формы

Вкратце, я пытаюсь обновить график, который я создал с помощью d3.js, с данными из формы на той же странице, что и график. То есть Я показываю столбчатую диаграмму с тремя столбцами и хочу иметь возможность настроить высоту третьего столбца через простой ввод вместе с диаграммой. На данный момент я загружаю данные через csv-метод d3, поэтому, возможно, это не лучший способ работы.

Если кто-нибудь может помочь, я бы очень признателен! Я могу отправить код, если вы хотите, но я решил, что общее объяснение может быть достижимо.

веселит, Аллен

Вот как это выглядит после того, как я получил это работает:

<!DOCTYPE html> 
<html> 
    <head> 
     <meta charset="utf-8"> 
     <style> 
      body { 
       font: 10px sans-serif; 
      } 
      .axis path, 
      .axis line { 
       fill: none; 
       stroke: #000; 
       shape-rendering: crispEdges; 
      } 

      .bar { 
       fill: steelblue; 
      } 

      .x.axis path { 
       display: none; 
      } 
     </style> 
     <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> 
     <script src="http://d3js.org/d3.v3.min.js"></script> 
    </head> 
    <body> 
     <div id="chart"></div> 
     <div> 
      <form> 
       A: <input class="fields" id="a" type="float"/> 
       B: <input class="fields" id="b" type="float"/> 
       C: <input class="fields" id="c" type="float"/> 
       <input type="submit" /> 
      </form> 
     </div> 
     <!--d3 code--> 
     <script> 
      var data = [10,50,200]; 
      var margin = {top: 20, right: 20, bottom: 30, left: 40}, 
       width = 960 - margin.left - margin.right, 
       height = 500 - margin.top - margin.bottom; 
      var formatPercent = d3.format(".0%"); 

      var x = d3.scale.ordinal() 
       .rangeRoundBands([0, width], .1); 

      var y = d3.scale.linear() 
       .range([height, 0]); 

      var xAxis = d3.svg.axis() 
       .scale(x) 
       .orient("bottom"); 

      var yAxis = d3.svg.axis() 
       .scale(y) 
       .orient("left") 

      var svg = d3.select(document.getElementById("chart")).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 + ")"); 

      svg.selectAll(".bar") 
       .data(data) 
       .enter().append("rect") 
       .attr("x", function(d, i) { return i * 200; }) 
       .attr("width", function(d) {return 100;}) 
       .attr("y", function(d) { return height - d;}) 
       .attr("height", function(d) { return d; }); 
     </script> 
     <!--on form submit--> 
     <script type="text/javascript"> 
      $("form").submit(function() { 
       var newA = document.getElementById("a").value; 
       var newB = document.getElementById("b").value; 
       var newC = document.getElementById("c").value; 

       svg.selectAll("rect") 
        .data([newA, newB, newC]) 
        .attr("y", function(d) { return height - d;}) 
        .attr("height", function(d) { return d; }); 

       return false; 
      }); 
     </script> 
    </body> 
</html>

источник

2013-02-27 AllenSH

Основной образец является то, что вы вызываете функцию от onclick обработчика вашей формы, который обновляет данные. Таким образом, в вашем случае с тремя столбцами первые две точки данных останутся неизменными, а третья будет обновляться на основе входного значения (которое вы можете получить из формы с помощью d3 или jquery или что-то в этом роде).

Загрузка исходных данных через d3.csv не должна быть проблемой, если вы используете шаблоны выбора d3 - см. the circles tutorial для получения дополнительной информации об общей идее. Поэтому в вашем обработчике вы должны настроить высоту на основе новых данных, которые должны быть тем же самым кодом, который вы использовали для создания диаграммы изначально.

источник

2013-02-27 09:20:07

Спасибо! Закончилось упрощение некоторых вещей, но ваш совет заставил меня идти в правильном направлении. – AllenSH

Обновление диаграммы d3 с данными из формы

ответ

Смежные вопросы