I used recommendations by Mike Bostock on Topojson: list of differences between v0 and v1? to migrate my code from v0 to v1.
Topojson_v0 -- Working.
Topojson_v1 -- Labels of points are shut down.
No other changes made.
My data is the same final_adms_France.json file.
What is the issue ? How to make it work ?
Comment: Seems I got an issue with :
.attr("transform", function(d) { return "translate(" + projection(d.coordinates) + ")"; })
out of :
// Positioning: place-label
svg.selectAll(".place-label")
.data(topojson.object(fra, fra.objects.places).geometries)
.enter().append("text")
.attr("class", "place-label")
.attr("transform", function(d) { return "translate(" + projection(d.coordinates) + ")"; })
.attr("dy", ".35em")
.text(function(d) { if (d.properties.name!=="Paris"&&d.properties.name!=="Bremen"){return d.properties.name;} })
.attr("x", function(d) { return d.coordinates[0] > -1 ? 6 : -6; })
.style("text-anchor", function(d) { return d.coordinates[0] > -1 ? "start" : "end"; });
You should use d.geometry.coordinates instead of d.coordinates.
Related
I created sankey layout in d3. tooltips added on links and nodes as shown in given Jfiddle http://jsfiddle.net/n7f2dkt0/39/
Issue is Node names disappears when user mouse hover on the node name for sankey layout on edge browser.how to resolve this issue?
screenshot for error
var link = svg.append("g").selectAll(".link")
.data(energy.links)
.enter().append("path")
.attr("class", "link")
.attr("d", path)
.style("stroke-width", function(d) { return Math.max(1, d.dy); })
.sort(function(a, b) { return b.dy - a.dy; });
link.on("mouseover", mouseoverLink)
link.on("mouseout", mouseoutLink);
var node = svg.append("g").selectAll(".node")
.data(energy.nodes)
.enter().append("g")
.attr("class", "node")
.attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; })
.call(drag);
node.append("rect")
.attr("height", function(d) { return d.dy; })
.attr("width", sankey.nodeWidth())
.style("fill", function(d) { return d.color = color(d.name.replace(/ .*/, "")); })
.style("stroke", function(d) { return d3.rgb(d.color).darker(2); })
node.append("text")
.attr("x", -6)
.attr("y", function(d) { return d.dy / 2; })
.attr("dy", ".35em")
.attr("text-anchor", "end")
.attr("transform", null)
.text(function(d) { return d.name; })
.filter(function(d) { return d.x < width / 2; })
.attr("x", 6 + sankey.nodeWidth())
.attr("text-anchor", "start");
node.on("mouseover", mouseover);
node.on("mouseout", mouseout);
I am trying to use General Pattern to update my Pack Layout but have not been successful. Below is my fiddle. So when Randomize Data is clicked the data should be updated.
Here is my full fiddle.
function update() {
root = d3.hierarchy(data)
.sum(function(d) {
return d.size;
})
.sort(function(a, b) {
return b.value - a.value;
});
var node = g.selectAll(".node")
.data(pack(root).descendants())
.enter().append("g")
.attr("class", function(d) {
return d.children ? "node" : "leaf node";
})
.attr("transform", function(d) {
return "translate(" + d.x + "," + d.y + ")";
});
node.append("title")
.text(function(d) {
return d.data.name + "\n" + format(d.value);
});
node.append("circle")
.attr("r", function(d) {
return d.r;
});
node.filter(function(d) {
return !d.children;
}).append("text")
.attr("dy", "0.3em")
.text(function(d) {
return d.data.name.substring(0, d.r / 3);
});
}
Your code only have the "enter" selection. You're missing an "update" selection (and eventually an "exit" selection).
The "update" selection can be something like this:
var nodeUpdate = g.selectAll(".node")
.attr("transform", function(d) {
return "translate(" + d.x + "," + d.y + ")";
});;
var circleUpdate = nodeUpdate.select("circle")
.attr("r", function(d) {
return d.r;
});
Check the fiddle: https://jsfiddle.net/or7pLnjp/
I am building my own sunburst diagram from this example
by adding multiline captions as .
for(i = 0; i < MAX_LINES; i++){
var text = g.append("text")
.attr("transform", function(d) { return "translate(" + getCentroid(d) + ")rotate(" + textRotation(d) + ")"; })
.attr('text-anchor', function (d) { return textRotation(d) > 180 ? "end" : "start"; })
.attr("dx", "0")
.attr("dy", "0em")
.attr("class", function(d) { return setStyle(d); })
.style("fill", function(d) { return setColor(d); })
.style("text-anchor", "middle")
.append("tspan")
.attr("dy", function(d) { return getDY(d, i); } )
.text(function(d) { return getLine(d, i); });
//.text(function(d) { return d.name; });
}
This works absolutely fine on initial state, but when you are
zooming it by clicking on certain partition everything becomes
messy. The script only moves first line element and doesn't
hide other elements shouldn't be on screen.
.duration(500)
.attrTween("d", arcTween(d))
.each("end", function(e, i) {
if (e.x >= d.x && e.x < (d.x + d.dx)) {
var arcText = d3.select(this.parentNode).select("text");
arcText.transition().duration(750)
.attr("opacity", 1)
.attr("transform", function(d) { return "translate(" + getCentroid(d) + ")rotate(" + textRotation(d) + ")"; })
.attr('text-anchor', "middle")
}
});
}
});
How I can transform for every partition?
I have tried to do selection by "tspan" or its style class.
Is it possible to completely renew block by reassigning name
and recreating 's
I have searched through many answers about getting X (date) values given a Y. Most revolve around the scale.invert() function. However, I am having trouble implementing this in my task.
Task: I am creating a hydrograph (time-series line graph of water level). I'm also plotting min/max points, and median line, all with text labels. See first image. This is a 'proof of concept', so I'm ok with things being a little dirty.
Problem: I want to add the corresponding dates for those min/max points, and I can't figure out how. One caveat, sometimes there are multiple points with same min or max value. I am unable to: A) get the correct date for the point, and B) add the date for each instance (all mins and maxes, if there are multiples) to the text. Thanks for any help or direction.
Some of the code (that I think is immediately relevant) is below. Here's the codepen. I'm sure it's not pretty, I'm new to D3 and javascript.
...
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis)
svg.append("g")
.attr("class", "y axis")
.call(yAxis)
.append("text")
.attr("transform", "rotate(-90)")
.attr("y", 6)
.attr("dy", ".71em")
.style("text-anchor", "end")
.text("Water Level (ft)");
svg.append("path")
.datum(data)
.attr("class", "line")
.attr("d", line);
var extent = d3.extent(data, function(d) {
return d.level
})
var min = extent[0]
var max = extent[1]
var median = d3.median(data, function(d) {
return d.level
})
var medianLine = svg.append("line")
.attr("class", "medianLine")
.attr("y1", y(median))
.attr("y2", y(median))
.attr("x1", 0)
.attr("x2", width)
var points = svg.selectAll("g")
.data(data)
.enter()
.append("g")
.filter(function(d) {
return d.level === min || d.level === max;
})
points.append("circle")
.attr("class", "dot")
.attr("cx", function(d) {
return x(d.date);
})
.attr("cy", function(d) {
return y(d.level);
})
.attr("r", 5)
points.append("text")
.attr("x", function(d) {
return x(d.date);
})
.attr("y", -20)
.attr("font-family", "sans-serif")
.attr("font-size", "12px")
.style("text-anchor", "middle")
points.selectAll("circle")
.style("fill", function(d) {
if (d.level === min) {
return "red"
} else {
return "#009933"
};
});
points.selectAll("text")
.text(function(d) {
if (d.level === min) {
return "Min: " + min
} else if (d.level === max) {
return "Max: " + max
}
})
.style("fill", function(d) {
if (d.level === min) {
return "red"
} else if (d.level === max) {
return "#246B24"
}
})
svg.append("text")
.attr("transform", "translate(" + (width + 3) + "," + y(median) + ")")
.attr("dy", ".35em")
.attr("text-anchor", "start")
.style("fill", "#cc6600")
.text(function(d) {
return "Median: " + median
})
...
Well after a quick peek to the code the date is a property of your data so there should not be any problem accessing it e.g.
points.selectAll("text")
.text(function(d) {
// date is accessible through d.date
if (d.level === min) {
return "Min: " + min + ' ' + d.date
} else if (d.level === max) {
return "Max: " + max + ' ' + d.date
}
})
If you want to format the date you can read about time formatting in d3
I am using d3.js for bubble chart.its working fine but i need to write custom tool tip for the data which i am showing.currently i just appended one title tag so it just showing one data with tooltip
what if i have more data to show and want to show in form of a table.
Here is my code.
d3.json("data/bubble.json", function(error, root) {
var node = svg.selectAll(".node")
.data(bubble.nodes(classes(root))
.filter(function(d) { return !d.children; }))
.enter().append("g")
.attr("class", "node")
.attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });
node.append("title")
.text(function(d) { return d.className + ": " + format(d.value); });
node.append("circle")
.attr("r", function(d) { return d.r; })
.style("fill", function(d) { return color(d.packageName); });
node.append("text")
.attr("dy", ".3em")
.style("text-anchor", "middle")
.text(function(d) { return d.className.substring(0, d.r / 3); });
});