•  27-10-2019
  •  | 
  •  

سؤال

I am trying to write a tutorial about d3 and I found couple websites that can help but with not enough details.

I have the following code that outputs a bar chart: 

<html>
<head>
<div id="mainGraph">
        </div>
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<script type="text/javascript">

var t = 1, // start time (seconds since epoch)
    v = 0, // start value (subscribers)
    data = d3.range(33).map(next); // starting dataset

 function next() {
   return {
    time: ++t,
     value: v = ~~Math.max(10, Math.min(80, v + 3 *( Math.random() - .5))
   };
}
setInterval(function() {
   data.shift();
   data.push(next());
 }, 1500);

  var w = 40,
      h = 100;

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

  var y = d3.scale.linear()
      .domain([0, 100])
     .rangeRound([0, h]);

     var chart = d3.select("body")
     .append("svg:svg")
     .attr("class", "chart")
     .attr("width", w * data.length + 10)
     .attr("height", h);

     chart.selectAll("rect")
     .data(data)
    .enter().append("svg:rect")
     .attr("x", function(d, i) { return x(i) + 5; })
     .attr("y", function(d) { return h - y(d.value) + 5; })
     .attr("width", w)
     .attr("height", function(d) { return y(d.value); });

     chart.append("svg:line")
     .attr("x1", 0)
     .attr("x2", w * data.length)
     .attr("y1", h + 5)
     .attr("y2", h + 5)
     .attr("stroke", "#000");





    </script>           
    </body>
    </html>

the problem that I am facing now is when I try to change the set of data so i am trying to put v in function of t like v = Math.exp (t) this is not working and its giving me a black line only even though I changed the interval of max and min. Thank you.

هل كانت مفيدة؟

المحلول 

setInterval(function() {
   data.shift();
   data.push(next());
 }, 1500);

setInterval makes the code run every 1.5 seconds

   data.shift();

Removes the first element of array data (which is filled with random numbers)

   data.push(next());

Inserts a new random value at the end of the array. next() is a function that generates random numbers.

So, in summary, data.push(next()); inserts a new random value at the end of array data

نصائح أخرى

I recommend you consider passing in fixed data for your tutorial, rather than using a number generator. It's more common that chart users generate the data, separately, and then pass the data to the charting tool. I always find it useful to do so.

A common data input format is to use the D3.csv post-parsed string format...

var dataSet1 = [
  {xCoordinate: "Legend String 1", magnitude: 54, link: "http://www.if4it.com"},
  {xCoordinate: "Legend String 2", magnitude: 21, link: "http://www.if4it.com/glossary.html"},
  {xCoordinate: "Legend String 3", magnitude: 31, link: "http://www.if4it.com/resources.html"},
  {xCoordinate: "Legend String 4", magnitude: 14, link: "http://www.if4it.com/taxonomy.html"},
  {xCoordinate: "Legend String 5", magnitude: 19, link: "http://www.if4it.com/disciplines.html"},
  {xCoordinate: "Legend String 6", magnitude: 47, link: "http://www.if4it.com"},
  {xCoordinate: "Legend String 7", magnitude: 27, link: "http://www.if4it.com/glossary.html"}];

I have a working example on github called "Multiple Vertical Bar Charts Mixed In With Common HTML Layout Constructs."

One thing I'd like to try to get to work is using events to control things like highlighting specific bars in the chart as I mouseover the text legends to the right of the graph. If you know how to do so, please feel free to elaborate.

I hope this helps.

Frank

مرخصة بموجب: CC-BY-SA مع الإسناد
لا تنتمي إلى StackOverflow
scroll top