enter image description here

Je travaille sur une application d3 - qui comporte un graphique à barres avec des nodules en haut. Je tiens à ce que cela soit animé - afin que les barres poussent jusqu'au point de repos et que les nodules poussent comme des fleurs.

Ainsi, les nodules sont soit développés au début et les barres montent juste - soit les barres montent et ensuite les nodules fleurissent.

//vieux violon js http://jsfiddle.net/s1f4hzpu/1/

//tentatives d'animation en cours http://jsfiddle.net/9yvn8c4q/

var $this = $('.lollipopchart');

var data = [{
    label: 'Toblerone',
    value: 10,
  },
  {
    label: 'Snickers',
    value: 25,
  },
  {
    label: 'Jawbreakers',
    value: 60,
  },
  {
    label: 'Gummi Worms',
    value: 20,
  },
];

var width = $this.data('width'),
  height = $this.data('height');

var color = d3.scaleOrdinal()
  .range(["#eb6383", "#fa9191", "#ffe9c5", "#b4f2e1"]);

data.forEach(function(d) {
  d.total = +d.value;
});

var margin = {
    top: 20,
    right: 20,
    bottom: 85,
    left: 20
  },
  width = width - margin.left - margin.right,
  height = height - margin.top - margin.bottom;

var x = d3.scaleBand()
  .range([0, width])
  .padding(0.9);
var y = d3.scaleLinear()
  .range([height, 0]);

x.domain(data.map(function(d) {
  return d.label;
}));
y.domain([0, d3.max(data, function(d) {
  return d.total;
})]);

var svg = d3.select($this[0])
  .append("svg")
  .attr("width", width + margin.left + margin.right)
  .attr("height", height + margin.top + margin.bottom)
  .append("g")
  .attr('class', 'lollipopchart')
  .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

var lollipop = svg.append('g').attr('class', 'lollipop');

var bars = lollipop
  .append("g")
  .attr('class', 'bars')

bars.selectAll(".bar")
  .data(data)
  .enter().append("rect")
  .attr("class", "bar")
  .attr('fill', function(d, i) {
    return color(i);
  })
  .attr("x", function(d) {
    return x(d.label);
  })
  .attr("width", x.bandwidth())
  .attr("y", function(d) {
    return y(d.value);
  })
  .attr("height", function(d) {
    return height - y(d.total);
  });



var lolliradian = 10;

var circles = lollipop
  .append("g")
  .attr('class', 'circles');

circles.selectAll("circle")
  .data(data)
  .enter()
  .append("circle")
  //.transition()
  //.duration(1000)
  .attr("cx", function(d) {
    return (x(d.label) + x.bandwidth() / 2);
  })
  .attr("cy", function(d) {
    return y(d.value);
  })
  .attr("r", lolliradian)
  .attr('fill', function(d, i) {
    return color(i);
  })


var innercircles = lollipop
  .append("g")
  .attr('class', 'innercircles');

innercircles.selectAll("circle")
  .data(data)
  .enter()
  .append("circle")
  //.transition()
  //.duration(1000)
  .attr("cx", function(d) {
    return (x(d.label) + x.bandwidth() / 2);
  })
  .attr("cy", function(d) {
    return y(d.value);
  })
  .attr("r", lolliradian - 5)
  .attr('fill', '#ffffff')



lollipop.append("g")
  .attr("transform", "translate(0," + height + ")")
  .call(d3.axisBottom(x))
  .selectAll("text")
  .style("text-anchor", "end")
  .attr("dx", "-.8em")
  .attr("dy", ".15em")
  .attr("transform", "rotate(-65)");

lollipop.append("g")
  .call(d3.axisLeft(y));
body {
  background: #eeeeee;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://d3js.org/d3.v4.min.js"></script>
<h1>LolliPop I</h1>
<div class="lollipopchart" data-width="300" data-height="300" />
-1
The Old County 18 nov. 2020 à 22:11

1 réponse

Meilleure réponse

Premièrement, vous n'avez pas besoin de jQuery, vous pouvez faire tout ce que vous voulez avec d3. Quoi qu'il en soit, si vous voulez faire grandir les barres, vous devez savoir que y=0 est le haut et y=height est le bas, vous devez donc réellement diminuer y à mesure que vous augmentez height.

Je ne dessinerais pas non plus de cercle devant un autre cercle, mais j'utiliserais plutôt les couleurs stroke et fill. Si vous faites un trait de 5 pixels de large, cela ressemble à votre exemple.

var data = [{
    label: 'Toblerone',
    value: 10,
  },
  {
    label: 'Snickers',
    value: 25,
  },
  {
    label: 'Jawbreakers',
    value: 60,
  },
  {
    label: 'Gummi Worms',
    value: 20,
  },
];

var width = +d3.select(".lollipopchart").attr('data-width'),
  height = +d3.select(".lollipopchart").attr('data-height');

var color = d3.scaleOrdinal()
  .range(["#eb6383", "#fa9191", "#ffe9c5", "#b4f2e1"]);

data.forEach(function(d) {
  d.total = +d.value;
});

var margin = {
    top: 20,
    right: 20,
    bottom: 85,
    left: 20
  },
  width = width - margin.left - margin.right,
  height = height - margin.top - margin.bottom;

var x = d3.scaleBand()
  .range([0, width])
  .padding(0.9);
var y = d3.scaleLinear()
  .range([height, 0]);

x.domain(data.map(function(d) {
  return d.label;
}));
y.domain([0, d3.max(data, function(d) {
  return d.total;
})]);

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

var lollipop = svg.append('g').attr('class', 'lollipop');

var bars = lollipop
  .append("g")
  .attr('class', 'bars')

bars.selectAll(".bar")
  .data(data)
  .enter().append("rect")
  .attr("class", "bar")
  .attr('fill', function(d, i) {
    return color(i);
  })
  .attr("x", function(d) {
    return x(d.label);
  })
  .attr("width", x.bandwidth())
  .attr("y", height)
  .transition()
  .duration(1500)
  .attr("y", function(d) {
    return y(d.value);
  })
  .attr("height", function(d) {
    return height - y(d.total);
  });

var lolliradian = 10;

var circles = lollipop
  .append("g")
  .attr('class', 'circles');

circles.selectAll("circle")
  .data(data)
  .enter()
  .append("circle")
  .attr("cx", function(d) {
    return (x(d.label) + x.bandwidth() / 2);
  })
  .attr("cy", height)
  .attr("r", x.bandwidth() / 2)
  .attr("fill", "white")
  .attr("stroke-width", 5)
  .attr('stroke', function(d, i) {
    return color(i);
  })
  .transition()
  .duration(1500)
  .attr("cy", function(d) {
    return y(d.value);
  })
  .on("end", function() {
    d3.select(this)
      .transition()
      .duration(500)
      .attr("r", lolliradian);
  });


lollipop.append("g")
  .attr("transform", "translate(0," + height + ")")
  .call(d3.axisBottom(x))
  .selectAll("text")
  .style("text-anchor", "end")
  .attr("dx", "-.8em")
  .attr("dy", ".15em")
  .attr("transform", "rotate(-65)");

lollipop.append("g")
  .call(d3.axisLeft(y));
body {
  background: #eeeeee;
}
<script src="https://d3js.org/d3.v4.min.js"></script>
<h1>LolliPop I</h1>
<div class="lollipopchart" data-width="300" data-height="300" />
2
Ruben Helsloot 18 nov. 2020 à 23:03