circle-pack

'd3-circle-text' on zoomable circle-pack

由 旧时模样 提交于 2019-12-06 02:00:59
The 'd3-circle-text' plug-in works great on a static circle-pack (many thanks to musically-ut for contributing https://github.com/musically-ut/d3-circle-text ). However, on a zoomable circle-pack, labels fly about the place (in the fiddle, they stay static not repositioning on zoom). Is it possible to get the circle-text to zoom with the circles? (If the plug-in isn't zoomable, that's ok. I'll try another labelling approach.) Here's the code section I'm working on: ////////////Circle text var circleText = d3.circleText() .radius(function(d) { return d.r - 5; }) .value(function(d) { return d

Circle packs as nodes of a D3 force layout

由 淺唱寂寞╮ 提交于 2019-12-05 22:25:45
Here is jsfiddle : This is really good if you have, let's say, 2 political parties, and you want to present election results across several voting units, or similarly structured data. However, I need to visually represents this: (5 political parties instead of 2) (please ignore all raws except "seats"; only "seats" are supposed to be visualized) I would like to have a circle pack inside each force layout node . For example, there should be a balloon called BC containing four smaller circles with areas proportional to 21, 12, 2, 1 (one political party didn't win any seat in BC - British

Updating D3 circle pack layout

由 房东的猫 提交于 2019-12-05 16:07:39
I'm trying to dynamically update a d3 circle pack layout with data I receive in json. Every second I call d3.json() to get the new json. Instead of updating the existing visualization, my implementation just creates a new one under the old one. I want to to dynamically update the existing layout instead... <!DOCTYPE html> <html> <head> <script type="text/javascript" src="d3.v2.js"> </script> <script type="text/javascript" src="jquery-1.4.min.js"></script> <link rel="stylesheet" href="style.css" type="text/css"> <link rel="stylesheet" href="syntax.css" type="text/css"> <link rel="stylesheet"

D3 update circle-pack data new nodes overlap existing nodes

由 為{幸葍}努か 提交于 2019-12-05 15:02:20
I'm following the General Update Pattern but having an issue with regards to layering. Using a circle-pack layout, I pack the new data, update , enter and exit the circle elements. However, when new elements enter , they overlap the updated circles. Data key function is based on element name: .data(nodes, function(d, i) { return d.name; }); So my circle pack has a spot for the updated circle (of the correct location and size) but it's hidden behind its newly entered parent circle. Is there a way to send these updated nodes to the front or redraw them over the entered circles? --UPDATE-- As

How to achieve that bubbles are only clickable if completly zoomed d3js

由 风格不统一 提交于 2019-12-04 13:58:45
I have a little problem here: I'm working with this example ( http://bl.ocks.org/mbostock/7607535 ) and I modified the flare.json file like this: { "name": "flare", "children": [ { "name": "Kommunikation und Umwelt", "children": [ { "name": "Courses", "children": [ { "name": "AO-Psy.", "children": [ {"name": "Prof. A", "size": 5731,"url":"index.html"}, {"name": "Prof. B", "size": 5731}, {"name": "Prof. C", "size": 5731} ] }, { "name": "E&E", "children": [ {"name": "Prof. D", "size": 5731}, {"name": "Prof. E", "size": 5731}, {"name": "Prof. F", "size": 5731}, {"name": "Prof. G", "size": 5731},

How to insert pie charts in Pack Layout in d3.js?

由 我的未来我决定 提交于 2019-12-04 13:57:57
Hello All instead of simple Circles, i want to add pie charts in my Pack layout. Lets Suppose this is my pie chart data and pie layout var data=[2,3,4,5] var arc = d3.svg.arc() .outerRadius(50) .innerRadius(0); var pie = d3.layout.pie() .sort(null) .value(function(d) { return d; }); And this is how the packlayout draws the circle var circle = svg.selectAll("circle") .data(nodes1) .enter().append("circle") .attr("class", function(d) { return d.parent ? d.children ? "node" : "node node--leaf" : "node node--root"; }) .style("fill", function(d) { return d.children ? color(d.depth) : null; }) .on(

How to show d3.js circle pack graph in a Rails application?

由 允我心安 提交于 2019-12-03 21:53:55
I have been trying for long to make this : http://bl.ocks.org/mbostock/4063269#flare.json example work in my sample Rails app to learn about d3.js. But, I am getting hard time to make it work. I put the following code in my index.html.erb file : <script type="text/javascript"> var diameter = 960, format = d3.format(",d"), color = d3.scale.category20c(); var bubble = d3.layout.pack() .sort(null) .size([diameter, diameter]) .padding(1.5); var svg = d3.select("body").append("svg") .attr("width", diameter) .attr("height", diameter) .attr("class", "bubble"); d3.json("assets/data/flare.json",

Adding elements to a D3 circle pack nodes

由 邮差的信 提交于 2019-12-03 17:16:10
I am trying to make a zoomable circle packing chart. I'd like each child circle to contain a smaller chart which would always have the same structure (i.e. 4 columns, only the heights of the bars would change). I have tried adding a simple rect to my chart so far but the rects are not added in the circle and are statics: JS: var margin = 20, diameter = 400; var color = d3.scale.linear() .domain([-1, 5]) .range(["hsl(152,80%,80%)", "hsl(228,30%,40%)"]) .interpolate(d3.interpolateHcl); var pack = d3.layout.pack() .padding(2) .size([diameter - margin, diameter - margin]) .value(function(d) {

Convert d3.js bubbles into forced/gravity based layout

由 冷暖自知 提交于 2019-12-03 13:44:06
问题 I have a set of data that I am visualizing using d3.js. I am representing data points in the form of bubbles, where the configuration for bubbles is as follows: var dot = svg.selectAll("g") .data(data) .enter() .append("g"); dot.append("circle") .attr("class", "dot") .attr("cx", function(d) { return xp(x(d)); }) .attr("cy", function(d) { return yp(y(d)); }) .style("fill", function(d) { return colorp(color(d)); }) .attr("r", function(d) { return radiusp(radius(d)*2000000); }); dot.append("text

D3.js packed circle layout - how to adjust child radius

由 爷，独闯天下 提交于 2019-12-01 11:14:19
I am currently useing d3's packed cicle layout( this ) and have noticed that when a parent only has one child, the radius of the child is the same as the parents. Is it possible to modify this using the the .radius method the layout provides? Ideally if a parent only has one child the child's radius should be 1/2 of the parents. i found a partial solution, which is to add placeholder nodes to the tree, then run the layout, then remove them again. But this isnt exactly what i want, since it makes the layout look on sided. Hope this makes sense. take a look at the fiddle to see what i mean:
订阅 circle-pack