I have created a foot and added color gradient as shown in the solution for the below questions.
Add multi color gradient for different points in d3.js
d3.js scatter plot connecting dots with line
I have used clipath method to clip this foot. Now I want to set a black outline to this foot mask like in the picture below
Here is the Stackblitz Link
Add:
this.svgInner
.append("path")
.attr("d", line(ordered))
.style("stroke", "black")
.style("stroke-width", 1)
.style("fill", "none");
After line 300 of scatter-plot.component.ts in your StackBlitz
Related
I've got a choropleth map working with D3 on Observable. When the user mouses over a country, the border (path) is redrawn in red. I'd like to make this border extend on the interior of the path.
Here is the page: https://observablehq.com/d/33b758c361e919e8
This question is similar to Simple way to use existing object as a clipping path? with the difference that the clipping path needs to be set for each country individually. I'm just not sure how to handle that.
In an ideal world I would use the SVG Strokes extension to simply draw the stroke on the inside of the path, as discussed here: Can you control how an SVG's stroke-width is drawn?
I think I've essentially solved this problem by adding clipPath elements which refer to the previous paths (with the "use" tag).
svg
.append("g")
.attr("id", "map")
.selectAll("path")
.data(topojson.feature(world, world.objects.countries).features)
.join("path")
.attr("class", "country")
.attr("fill", d => color(value.get(d.properties.name)))
.attr("id", d => `${d.id}`)
.attr("d", path);
svg
.append("g")
.selectAll("clipPath")
.data(topojson.feature(world, world.objects.countries).features)
.join("clipPath")
.attr("id", d => `${d.id}_clip`)
.append("use")
.attr("xlink:href", d => new URL(`#${d.id}`, location))
My implementation for Brush & Zoom functionality in my d3 line chart is not working as expected,
I followed this link - https://bl.ocks.org/EfratVil/92f894ac0ba265192411e73f633a3e2f,
Problems what I am facing is -
chart is not showing all the values, I have 4 data but it only shows 3 data
onClick of dot I am showing the rect which is not moving with the brush functionality
minor thing but chart always goes out of the box
My code sandbox - https://codesandbox.io/s/proud-firefly-xy1py
Can someone point out what I am doing wrong? thanks.
Please suggest me what I am doing wrong, thanks.
Your first point is going behind your clip area. For example, if you right click on the first visible circle and inspect element you will see all 4 circle elements are present in the dom. The first circle element is behind the axis.
This means you have to move your plot to the right. Unfortunately, the way you have coded the chart you have not appended a g element for the main chart and then appended the circles and path to that g element. As a result this has to be done in multiple places.
First we adjust your clip path as:
svg
.append("defs")
.append("SVG:clipPath")
.attr("id", "clip")
.append("SVG:rect")
.attr("width", containerWidth)
.attr("height", height)
.attr("x", 40)
.attr("y", 0);
next we adjust your circles
scatter
.selectAll(".foo")
.data(data)
.enter()
.append("circle")
.attr("class", "foo")
.attr("transform", "translate(40,0)")
and then your line
scatter
.append("path")
.datum(data)
.attr("class", "line")
.attr("d", line)
.attr("transform", "translate(40,0)");
You will have to account for this 40 px translate for your other elements as well. Although I am having a hard time destructuring your svg. I think this should give you the idea though. Check the axis matches the time points as well.
Check the code sand box
Update
To make the rectangles move with the brush, you will have to add code to your brushed const function to recalculate the x, y, width and height using the updated scales.
Update2
After going through the codesandbox presented in the comments I was able to add the code to update the rectangles to the brushed const as below to make the rects also move with the brushing:
// update rectangles
scatter
.selectAll(".rect-elements")
.attr("x", d => {
console.log(d);
return xScale(d.startTime) - 12.5;
})
.attr("y", 0)
.attr("width", 24)
.attr("height", height + 5);
Full working Code Sandbox.
I started from a sample Map app at: http://bl.ocks.org/d3noob/raw/5193723/
I want to place a custom pie chart, as shown in the fig below. I created one by adding the code snippet just after the creation of circles is done.
Pie-chart Snippet:
var r=10;
var p = Math.PI*2;
var arc = d3.svg.arc()
.innerRadius(r-3)
.outerRadius(r)
.startAngle(0)
.endAngle(p* d.value1);
var arc2 = d3.svg.arc()
.innerRadius(r-7)
.outerRadius(r-4)
.startAngle(0)
.endAngle(p* d.value2);
g.append("path")
.attr("d", arc)
.attr("fill", "red")
.attr("transform", "translate(400,500)");
g.append("path")
.attr("d", arc2)
.attr("fill", "orange")
.attr("transform", "translate(400,500)");
It comes out nicely as shown in the pic below near Thailand:
Problem
When I zoom or move the map, the pie-chart disappears but the circles remain intact. Can someone help me understand it?
One can notice a very crude way the arcs are plotted. The pie-chart is expected to be plotted for each of the city. I am looking for a cleaner way just like the way circles are drawn.
The code that runs when zoom takes place
g.selectAll("path")
.attr("d", path.projection(projection));
is selecting all paths and modifying their "d" attribute. Since it's "generically" just looking for pathss, then it's also grabbing the donut paths you created and modifying them (probably setting them to empty strings or NaNs).
You can fix this either by taking the donuts out of the same g of the geo paths, so that they don't get selected. OR, you can make your "path" selector more specific, by adding some class (e.g. "geo") to all the geo paths and using that class whenever you select them (e.g. g.selectAll("path.geo")).
Here's the fiddle.
When I use the brush, the colored areas start off beyond the x axis defined.
For the line in the graph, I got a suggestion in this SO to add clip-path: url(#clip) to the line css. It works. After applying that, the line starts exactly from the 0 of x when using the brush.
But when I apply the same logic to the css of the .area.above and .area.below, it doesn't work.
The areas are clipped correctly but only one is actually displayed...from inspecting the elements in the browser developer tools, one of the areas is apparently overlaying the other.
Some one help me where I'm making the mistake?
Thanks in advance.
Here's a fiddle which I think does what you want: http://jsfiddle.net/henbox/jzPaq/
The problem was that you can only have one clip-path defined for an element. So adding the rectangular clipPath:
...append("clipPath")
.attr("id", "clip")
.append("rect")
.attr("width", width)
.attr("height", height);
was over-writing the clip-below and clip-above ones (in <path class="area below"...> and <path class="area above"...> respectively.
The solution I used was based on this info: http://apike.ca/prog_svg_clip.html
For the 'below' I used the intersection of the rectangular (#clip) and 'below' clip paths, like this:
Give the path element an id (clipbelowshape):
focus.append("clipPath")
.attr("id", "clip-below")
.append("path")
.attr("id", "clipbelowshape")
.attr("d", area.y0(height));
Create the intersect of clip clipPath with clipbelowshape:
var clipbelowintersect = focus.append("clipPath")
.attr("id", "clipbelowintersect")
.attr("clip-path", "url(#clip)");
clipbelowintersect.append("use")
.attr("xlink:href", "#clipbelowshape");
Use the new intersect clip path
focus.append("path")
.attr("class", "area below")
.attr("clip-path", "url(#clipbelowintersect)")
.attr("d", area);
Do the same thing with the above path
I have donut chart, check the jsfiddle. There is text in side donut chart. Right now the text inside donut chart is shows foreground color's percentage. What I want is when I click on text of foreground percentage, I should get midground's percentage with flip transition, something like this flip action in css. I tried on click on this code, but I have no idea how to use
var text = svg.append("text")
.text('0%')
.attr("text-anchor", "middle")
.style("font-size",fontSize+'px')
.attr("dy",fontSize/3)
.attr("dx",2);
How can I do this in d3?
You can achieve this effect with chained transitions that scale in one dimension:
.on("click", function() {
d3.select(this)
.transition().duration(1000)
.attr("transform", "scale(0,1)")
.transition().duration(1000)
.attr("transform", "scale(1,1)")
.text("foo");
});
Complete example here.