Menu
Is it possible to generate a bar chart in d3 and use similar tool or feature like the one in dygraphs (this) for range Selector? I want to zoom in and out for the time on x-axis.
Thanks!
655
D3 axes in bar chart Use any of these: d3.axisTop, d3.axisBottom, d3.axisLeft, d3.axisRight. Then append a g (group) element to the end of the SVG. var xAxis = d3.axisBottom (xScale); var yAxis = d3.axisLeft (yScale);
D3.js is the most popular JavaScript library for creating visual representations of your data. However, it’s a bit tricky to learn, so I think it’s important to start softly. In this tutorial, you’ll learn how to create your very first bar chart with D3.
We will calculate the bar width by diving the chart width by the dataset size. Let's see how we added the bars: We have created dynamic bars with our data using the SVG rectangle element. We also add a class "bar" to the rectangle element. Next, we need to specify the x and y positions of each of the bars and provide a width and height to the bars.
var xScale = d3.scaleBand ().range ( [0, width]).padding (0.4), The above code snippet defines scales for x axis. We use d3.scaleBand () for the x-axis. scaleBand () is used to construct a band scale.
Yes, you can use d3.brush to create this functionality. Here is an example from the creator of d3 on how to use it - and it is exactly what you wanted (zoomable bar-chart): http://bl.ocks.org/mbostock/1667367
166
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
