Ask Yourself
08/31/2023, 1:57 PMAsk Yourself
08/31/2023, 1:57 PMAsk Yourself
09/02/2023, 6:36 PMAbhishek Aligh
09/20/2023, 10:14 AMAnzhe Meng
10/11/2023, 2:46 AMimport * as d3 from "d3";
import * as axios from "axios";
const dataSet = async function getData() {
return await axios.get('/vis');
}
async function drawChart() {
const teams = await dataSet();
const data = teams.map((d) => (
{
...d,
team: d.team,
games: d.games
}
))
.filter(d => d.team)
.sort((a, b) => d3.descending(a.games, b.games));
// construct the radius scale
const radius = d3.scaleSqrt([0, d3.max(data, d => d.population)], [0, 40]);
// construct the path generator
const path = d3.geoPath();
// Select the SVG container. Its dimensions correspond to the bounding-box
const svg = d3.select("svg")
.attr("width", 975)
.attr("height", 610)
.attr("viewBox", [0, 0, 975, 610])
.attr("style", "width: 100%; height: auto; height: intrinsic;");
// Create the cartographic background layers.
svg.append("path")
.datum(topojson.feature(world, world.objects.land))
.attr("fill", "#ddd")
.attr("d", path);
svg.append("path")
.datum(topojson.mesh(world, world.objects.countries, (a, b) => a !== b))
.attr("fill", "none")
.attr("stroke", "white")
.attr("stroke-linejoin", "round")
.attr("d", path);
// Create the legend.
const legend = svg.append("g")
.attr("fill", "#777")
.attr("transform", "translate(915,608)")
.attr("text-anchor", "middle")
.style("font", "10px sans-serif")
.selectAll()
.data(radius.ticks(4).slice(1))
.join("g");
legend.append("circle")
.attr("fill", "none")
.attr("stroke", "#ccc")
.attr("cy", d => -radius(d))
.attr("r", radius);
legend.append("text")
.attr("y", d => -2 * radius(d))
.attr("dy", "1.3em")
.text(radius.tickFormat(4, "s"));
// Add a circle for each county, with a title (tooltip).
const format = d3.format(",.0f");
svg.append("g")
.attr("fill", "brown")
.attr("fill-opacity", 0.5)
.attr("stroke", "#fff")
.attr("stroke-width", 0.5)
.selectAll()
.data(data)
.join("circle")
.attr("transform", d => `translate(${centroid(d.team)})`)
.attr("r", d => radius(d.games))
.append("title")
.text(d => `${d.team.properties.name}: ${format(d.games)}`);
console.log(teams);
}
drawChart();
⬆️This is the Js script that uses D3.js.Cobus Theunissen
10/19/2023, 6:51 PMCobus Theunissen
10/19/2023, 6:53 PMRyan Parker
10/25/2023, 8:39 PMSooraj Arakkal
11/15/2023, 5:24 PMSooraj Arakkal
11/20/2023, 5:32 PMHarshith Yadav
12/07/2023, 11:54 AMAndreas Åkre Solberg
12/10/2023, 6:36 PMTim Hilt
12/22/2023, 4:43 PMaxis<...>
-function?
d3.select(gy).call(d3.axisLeft(y))
I want to use Server-Side-Rendering in my Next.js application to draw my Charts, but the axisLeft
/ axisBottom
-functions can not be used without hooks in React.Stephen Osserman
01/16/2024, 5:15 PMAllison (Observable Team)
01/23/2024, 1:16 PM今月白
02/02/2024, 2:27 AMSign Error
02/16/2024, 8:18 AMconst render = (svgRoot, data) => {
const svg = d3.select(svgRoot);
[…]
const s = d3.forceSimulation(…)
…
.on('tick', () => {
// updating nodes,
// the usual stuff
})
}
The function render( … )
is called each time the data
changes, but the svgRoot
usually stays the same - but must not.
1. Will the callback in on('tick', <callback>)
be reused, or is a new one added each time render()
is called, such that the update is triggered more than once?
2. In case the svg
changes - is recreated - will d3 by it self recognize which callbacks to trash?
Thanks for Help!Eric Gorr
02/20/2024, 4:27 PMlet composite = svg
.append('g')
.attr('id', 'composite')
.attr('transform', 'translate(20,50)')
.selectAll('g')
.data(labelNodes, (d) => d.id)
const g = composite.enter()
const rectangularNode = g
.append('rect')
.attr('class', 'node')
.attr('x', (d) => 0)
.attr('y', (d) => 0)
.attr('width', () => 200)
.attr('height', () => 25)
.attr('fill', '#dceed3')
const label = g
.append('text')
.attr('class', 'name')
.attr('ref', 'name')
.attr('id', 'name')
.attr('dominant-baseline', 'middle')
.attr('font-size', '10px')
.attr('x', () => 13)
.attr('y', () => 13)
.text((d) => {
return d['name']
})
What is the right way to get the dom element from composite
?
I tried composite.node()
, but when I try composite.node().setAttribute('transform', 'translate(10,10)')
, it just generates an error.
What does work, demonstrating I am getting the dom element is composite.node()._parent.setAttribute('transform', 'translate(10,10)')
, but accessing _parent
feels weird. I am guessing there is an “official” way to do what I need to do. What is that?Eric Gorr
02/22/2024, 1:33 PMtransform.transform
is what I need to be concerned about. I have attached an image of what I am logging. That data looks like:
> {k: 1.123499903031646, x: 16.831545672094762, y: -66.82348050936079}
The this
variable contains a reference to the SVG.
I assume I will need to apply it to the transform
attribute on the svg. What I am not sure about is exactly how to do that...?Eric Gorr
02/23/2024, 8:28 PMfunction clicked(event, d) {
event.stopPropagation()
console.log(`🚀 ~ clicked ~ event:`, event)
console.log(`🚀 ~ clicked ~ select:`, d3.select(this))
console.log(`🚀 ~ clicked ~ this:`, this)
console.log(`🚀 ~ clicked ~ d:`, d)
}
I can log all of those values and the correspond to the node I just clicked on. What I am wondering is whether there is a way via d3 to get what nodes the clicked node is linked to…?
I can go back to the original data and figure it out. But, if there was a way to ask d3 what the clicked node is linked to, it may be a bit easier…
If it helps, I attached a complete, simple example.Eric Gorr
02/28/2024, 7:50 PMaddData
function directly and add all of the nodes at once, everything works as expected.
However, if I use the addDataInChunks
, the first two nodes and first link are added, but after that no further nodes appear in the graph. Additionally, the ability to drag nodes around is lost as soon as the second chunk is added to the graph.
What have I done wrong? How does my code need to change so this will work?
I have attached a complete, simple (fairly) example.Zhaocong Yang
03/25/2024, 9:04 PMHao Zhang
03/30/2024, 1:29 AMAshen Visvakula
04/03/2024, 11:03 AMIlias Katsoulis
04/11/2024, 3:56 PMAshen Visvakula
04/17/2024, 10:28 AMGavin Wheeler
04/23/2024, 5:35 PMcheng fu
04/24/2024, 2:45 PMBen
04/25/2024, 3:40 PM.csv
file cause this errorFil
04/25/2024, 4:23 PM