I have simple tooltip question but I couldn't find the solution.
The codes below draw a doughnut chart. When user mouseovers a segment of pie, the tooltip should pop up in the middle of doughnut. But I don't know why it does not work here. Can anyone help to point out the problem? Here is JSbins
If I change the line 36 to d3.select(#pieChart), the tooltip works. However, for some reasons, I want the tooltip to append on svg.
Thanks a lot!
Not used JSBin a lot so I used JSFiddle : https://jsfiddle.net/thatoneguy/0qgzLk2L/
You can't append a div to svg so you have to create a container like so :
var svgContainer = d3.select('#pieChart');
And then append the svg to this :
var svg = svgContainer.append('svg')
And now use the container for the tooltips :
var tooltip = svgContainer
.append('div')
Related
I am currently internship at the "Direction Générale de l'Armement" and I need to do something.
I have a "network" type of d3.js code, I added the zoom/dezoom function, but I want to resize the text when we are zooming/dezooming.
When it zoom on a node, I want the text to lower a bit, and more important, when we dezoom I want the text to get bigger.
As we can find it on the internet, the zoom function that i added was this one :
var svg = d3.select("p")
.append("svg")
.call(d3.zoom().on("zoom",function(){svg.attr("transform", d3.event.transform)
}))
.append("g");
Do you have an idea ? Thanks a lot !
(Here is a picture of it)
I am trying to rotate only the <g class="tick">'s labels of this D3 bar-chart but the whole axis rotates and ends-up looking like this:
I have tried:
A .attr("transform", "rotate(...)"): The whole axis rotates...
The same inside the line .selectAll(".tick"), which causes the labels to rotate along themselves but they get relocated to the corner of the graph, like this:
How can I rotate each element relative to its own position?
You want to set .attr("transform", "rotate(...)") for only text element not the entire tick.
I figured it out with this D3 block. I have updated the chart so the old one is no longer visible. The lines added that fix the problem have been commented with "Line added to fix rotation" just in case someone comes across the same issue.
Thanks #Daniel for pointing me out in the right direction.
I'm trying to use ngx-charts to display an area chart that spans the full width of my page (it's supposed to match the width of the horizontal line above it). However, it appears that when generating a chart there is some sort of padding inside the svg, which I imagine is useful if you have a legend etc but I am not using that, here's what I see:
See how the actual area chart doesn't expand the full width?
My code:
<ngx-charts-area-chart
[scheme]="colorScheme"
[results]="heatmaps"
[curve]="curve"
[showGridLines]="showGridLines"
[tooltipDisabled]="tooltipDisabled"
(select)="onSelect($event)">
</ngx-charts-area-chart>
And my config variables in my component.ts
curve = d3.curveNatural;
showGridLines = false;
tooltipDisabled = true;
colorScheme = {
domain: ['#3f3f3f']
};
As you can see I am not using the view attribute so the chart should expand to the width of the page. I was thinking I could utilize a viewBox on the svg but not quite sure, any thoughts?
Thanks!
In this plunker I'm trying to make the xAxis text (the states) render on top of the rect element.
The usual fix is to select the .axis.axis--x and place it after the rect.
I've also tried to change the z-index in various classes and elements without any success.
Anyone that knows what I'm missing?
You should insert your layer containers (which contain your rects) before x-axis. Change your code on 186-188 string this way:
let barGroups = g.selectAll("g.layer").data(series);
barGroups.enter().insert("g", ".axis--x") // <== !!!
.classed('layer', true);
Look at my fork of your plunker.
Maintaining the correct order of <g> elements should work just fine. You need to make sure the <g class=".axis.axis--x"> comes after your bars in document order. There are multiple ways to achieve this; one way is to use selection.insert("g", ".axis.axis--x") to insert the bars right before the x axis group:
// Stacked bars
let barGroups = g.selectAll("g.layer").data(series);
barGroups.enter().insert("g", ".axis.axis--x")
.classed('layer', true);
Have a look at this working fork of your code.
I don't really know why but my xPosition in the stacked bar chart that I am working on is not really working. Can someone tell what I am doing wrong?
No matter what bar I hover over it always comes out on the side:
Here's a JS Bin code that I am working on: https://jsbin.com/qudoyewiba/edit?js,output
All help is appreciated. Thanks!
Inspect the console, the console is your friend. You have a lot of NaNs. The reason is simple: your rect elements don't have a "x" attribute. So, this doesn't work:
var xPos = parseFloat(d3.select(this).attr("x"));
Instead, you have to get the "x" translation of the group that is the parent of that respective rectangle:
var group = d3.select(d3.select(this).node().parentNode);
var xPos = d3.transform(group.attr("transform")).translate[0];
Here is your working code: https://jsbin.com/dutetokoti/1/edit