I am creating a d3 contour graph with the d3-contour plugin. I am creating grid lines using the tickSize function e.g.
const yAxis = d3.axisLeft(yScale).ticks(4).tickSize(-dimensions.width);
However - I only want the grid borders to be on the top, bottom and right hand side. Not on the left at all. Is there a way to do this?
Thanks!
Related
I am trying to add graph lines (horizontal and vertical) to a area chart.
I would like my graph
enter image description here
to look like this
enter image description here
I have attempted to follow this example https://github.com/d3/d3-axis but it only adds the dotted lines too the left of the axis and I cannot understand why
I have created a stack blitz for anyone who cares to help:
https://stackblitz.com/edit/angular-ivy-dbhrnm?file=src%2Fapp%2FstackedArea-chart-visualization%2FstackedArea-chart-visualization.component.ts,src%2Fapp%2FstackedArea-chart-visualization%2FstackedArea-chart-visualization.component.html
The best I found was to increase the ticksize to make them grids. So for example on your X Axis you can do something like this
.call(d3.axisBottom(x)
.tickSize(-height)
I'm completely new to d3. In my visualization, I'm adding tooltip to the nodes and node texts using d3 tip. But when it comes to the corners or edges, the tooltip clips from the viewing area. How do I dynamically move the tooltip's position such a way that it doesn't clip?
I am using iOS Charts by Daniel Gindi.
I need to draw horizontal stacked area chart (Example). But I cannot find similar charts in examples of the library. I am trying to customise Horizontal Bar Chart like in example. But I cannot to avoid square corners.
How can I draw line instead of bars with squared corners?
Is it possible in this library or I should use another one?
Yes you can.
Use line chart instead ,and set drawFilledEnabled to true.
But the filled area is between line and x axis, so you may need to rotate the chart.
I have an XY graph with a legend that automatically resizes to fit the contents of the legend. The problem is that sometimes the legend text is such that the resizing overlaps the plot, see the image below. Is there a way to keep the legend from resizing over the plot data? In other words to confine the resizing operation to outside of the plot box?
Update: it would seem that part of the problem is the auto expand ability of the legend always expands to the left-hand side. Placing the legend on the left-hand side of the plot keeps the legend from covering the graph.
1:
You probably have moved the legend, changing it's anchor point. You can move the legend to the right side of the graph element and it should re-anchor.
In one application I have both d3 map and leaflet map, I follow Mike's code to sync them(http://bost.ocks.org/mike/leaflet/) and draw svg points on leaflet map. The problem is that some points being cutoff at the edge of SVG container, and other SVG elements added later on (an animated pulse in this case) will only partially shown. I wonder if there's anyway to expand the SVG container based on the features (points) bound.
a working demo is here: http://xqin1.github.io/usschools/usac_school_stat.html, to reproduce the issue:
1. select the 'Number of Students' slider bar to 5300-6545, the two points on Leaftlet map only half shown.
2. click the first table row, map will zoom to the point, but the animated pulse being cut off.
Any suggestions are highly appreciated.
thanks
xiaoming
I had this problem as well, and found a solution. Referencing mbostock's sample code you just need to add a little bit of padding to the projected bounding box that is calculated each time reset is called:
var bottomLeft = project(bounds[0]),
topRight = project(bounds[1]);
Insert something like this (just after the above declarations):
var padding = 25; // In pixels, choose large enough to prevent edge clipping
// of your largest element
bottomLeft = [bottomLeft[0]-padding, bottomLeft[1]+padding]
topRight = [topRight[0]+padding, topRight[1]-padding]