Hi Stackoverflow folks,
I have a question on D3.js
Basically what I want to achieve is the change of the shape as below.
However,
Once I finished the coding of the first drawing, the coordinate information was as below.
d3.selectAll('body').select('svg').append('rect')
.attr('x', 50)
.attr('y', 50)
.attr('width',150)
.attr('height',150)
.attr('fill','none')
.attr('stroke-width',2)
.attr('stroke','black')
I tried to change the shape as I clicked the rectangle.
So I made a click event. But!
the Parallelogram I want to achieve should be made of 'path'.
How do I change the square shape as I click the square.
Since I want to do 'animate'for the change,
simply toggle off the square and and toggle on Parallelogram is not what I'm trying to make.
Can any please help me?
Or anyone has better solution for this??
Thank you in advance.
Related
I need help adding specific ticks to an axis that is also being focused with a brush. I found a similar question/answer for a static axis (without a brush) here:
Adding a specific tick to a D3.js axis
It's along the lines of what I'm trying to do. My chart is more similar to this example though :
http://blockbuilder.org/pergamonster/419aef09c21ffe8dd1dac971016468d6
Say you wanted to have a 'July 4' tick on both the full axis and the focus axis at all times. I've tried the axis.ticks().push(...arrayOfNumbers) from the above question/answer in my code, but nothing happens. If I do axis.tickValues(arrayOfNumbers) it puts ONLY those numbers as ticks, but I would like to have the auto scaling number PLUS my specific numbers on the axis for the focus area.
Any help would be appreciated.
P.S. Though my chart is similar the about blockBuilder example, I'm using a linearScale not a timeScale if that matters. Thanks
draw a second x-axis where you only specify the extra ticks.
svg.append('g')
.attr('class', 'x-axis-extra')
.attr("transform", `translate(0,${height})`)
.call(d3.axisBottom(xScale).tickValues([2.78,3.14]));
You need a bit of CSS to hide the extra path
.x-axis-extra path { opacity: 0; }
I created a heatmap and sparklines next to the heatmap.
HERE the Plunker
Now I would like that when the user hovers over a cell of the heatmap, a red dot is displayed on the corresponding sparkline.
On the other hand, when the user hovers over the sparkline, the corresponding cell in the heatmap is highlighted.
I hope it's clearer with some drawings:
I thought I could change the code at this point:
var cells = svg.selectAll('rect')
.data(data)
.enter()
.append('g')
.append('rect')
//...
.on('mouseover', tip.show) // <- HERE
.on('mouseout', tip.hide);
I should keep track of the rectangle on which the mouse is located and somehow pass this data to the piece of code that controls the sparkline.
But I don't really know how to do it and I have not found similar examples.
Thanks!
HERE MY PLUNKER
add this liblary:
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
To solve your problem, you need understand the concept,
The D3 can holding data when you put on it
The D3 can select base on class and id
The DOM element can hold attribute (Ex: attr-id)
Scale linear can be invers, that mean if you have domain you can have range and if you have range you can have domain
Element that draw with D3 is updatable & deletable
understand the liblary you use (d3-tip)
What i Change
i add class and id to element i want to select
if i want to use data, i save data to data-attribute
i make function to track my mouse on Line-chart, and invers it to get value
i draw object tip i want to use
read the code if you want to understand ask me which line you dont understand, if you need explanation
I want to know how to use arcTween for animating for multiple arc path at a time.
And what exactly the use of interpolate.?
Please find the below image which i am trying to achieve but couldn't able to. I hope i will get a better solution here.
And this is my code JSFiddle.
var partition=d3.layout.partition()
.size([Math.PI/2, radius])
.value(function (d) { return d.depth; });
After every click on button the arc paths should change their path in the mean of transitioning or animating just like showed in the above image.
I have a bar chart that is wider than the svg element but, with panning, you're able to drag left and right. The x-axis is time based (I use d3.time.scale()).
After building the chart, I'd like to be able to pan to a specific point on the x-axis. For example, the user may have already panned to a certain point and shut down their session - I'd like to put them back where they were when they return.
I've been looking at doing something like:
d3.selectAll('rect')
.attr('transform', 'translate(' + savedXaxisLocation + ',0)';
Is that the right idea? I'm assuming I also need to do that to the x axis itself?
As you can tell I'm feeling my way around this - I'd be happy to include any other code or screenshots if y'all feel it relevant.
In general, you would have a top-level g element that contains everything else and would translate that. This saves you from having to translate all the elements individually. When you do that, you may want to apply a clipPath to hide the elements that have been panned out of view.
This example should help you to get a better idea of what you can do and how.
I am using the zoomable sunburst example but I am struggling trying to add a text to the center of the diagram and still make it zoomable.
The idea is that the text in the center will change when I click on a certain arc indicating its length. It seems that the properties of the mouseclick and mouseover dissapear.
This is what I have tried:
path.append("svg:text")
.on("click",click)
.style("font-size","4em")
.style("font-weight","bold")
.text(function(d) { return count_function(data); });
Can someone help me understand how to display the text in th center of the chart without losing the click functionality?
Maybe an easier approach would be to select the "g" that represents the circular centre and add text to it once the chart was been displayed. I have tried this but I am unable to successfylly select just this element (sorry I am new to D3), so back to square one.
It looks like you're trying to insert a text element inside a path element. Try something like this:
svg.select("g").append("svg:text")
.on("click",click)
.style("font-size","4em")
.style("font-weight","bold")
.text(function(d) { return count_function(data); });