标签: circle-pack
D3js过滤器选择
我创建交互式气泡图的财富500点的数据.我试图减少选择,但无法弄清楚为什么它不像我期望的那样工作.
var bubble = d3.layout.pack()
...
d3.json("js/data/fortune2009.json", function(json) {
var node = svg.data([json]).selectAll("g.node")
.data(bubble.nodes); // filter here?
node.enter()
.append("g")
.attr("class", "node")
.attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });
node.append("circle")
.attr("r", function(d) { return d.r; })
.attr("class", function(d) { return "q" + color(d.Profit) + "-9"; });
node.filter(function(d) { return !d.children; })
.append("text")
.attr("dy", ".3em")
.style("text-anchor", "middle")
.text(function(d) { return d.Company.substring(0, d.r / 3); });
});
JSON数据如下所示:
{
"children":[
{
"Year" …推荐指数
解决办法
查看次数
D3.js无法加载json文件
我正在尝试创建一个D3.js 打包的圆形图.
当我将数据嵌入HTML文件时,它工作正常.当我将数据放在外部文件中时,我什么也得不到(空白DOM,没有控制台消息).
如果取消注释var数据声明并注释掉d3.json(以及相应的右括号),它可以正常工作.
我可以在浏览器中看到"2013 Inf-2.json"文件,它看起来很好(它通过了jsonlint验证).它包括从第一个"{"到/包括最后一个"}"的所有内容.就像嵌入式的例子一样.
我在OSX Mavericks上通过httpd(:80)运行它,并试图在Chrome或Safari中渲染图表.
<!DOCTYPE html>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<html lang="en">
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript" src="./d3.v3.min.js"></script>
</head>
<body>
<div id="chart2"></div>
<script type="text/javascript">
var w = 640, h = 480;
/*
var data ={
"name" : "root",
"children" : [
{
"name":"URIN TRACT INFECTION NOS",
"size":12196
},
{
"name":"ACUTE PHARYNGITIS",
"size":6679
},
{
"name":"PNEUMONIA ORGANISM NOS",
"size":6452
},
{
"name":"BRONCHITIS NOS",
"size":2636
},
{
"name":"CELLULITIS OF LEG",
"size":2348
},
{
"name":"OBSTR CHRONIC BRONCHITIS …推荐指数
解决办法
查看次数
D3圆圈包布局中的圆圈文字
我试图circle pack layout用沿着圆圈本身流动的文本标记一些圆圈.
这是一个实验性的jsfiddle:
如您所见,可以沿着圆圈呈现文本,以其顶部为中心.虽然浏览器的曲线SVG文本渲染很糟糕.但是,让我们说我们不关心它.
这是另一个jsfiddle
在这些情况下,我想在此图表上放置弯曲标签:
- 圆圈代表一个省(只有深度== 1)(不列颠哥伦比亚省,阿尔伯塔省,等等)
- 所有儿童的规模总和(换句话说,分配的议会席位数)大于5.
- 该省的名称应该都是大写的.
您可以在代码本身中看到我的一些尝试.我已经尝试了几个小时.我的主要问题是圆圈中的圆圈现在位于XY空间中的某个位置,而在第一个jsfiddle中,所有圆圈都具有坐标系原点的中心.
也许你可以通过重新审视来帮助我.
基础数据基于此表:
(注意:这与我前几天询问的'圆形包作为D3力布局的节点'的问题有些相关,但这是一个独立的实验.)
我决定使用常规SVG弧而不是d3.svg.arc().我仍然认为这是一个正确的决定.但是,这就是我现在拥有的::) jsfiddle
推荐指数
解决办法
查看次数
如何在d3.js中更新气泡图？
我设法创建了一个气泡图,当它是单个数据集时可以正常工作.但是如果我需要用其他数据集更新它,那就出问题了.请帮助我在http://jsfiddle.net/9jL64/上更新我的更新功能.
function changebubble(root)
{
var node = svg.selectAll(".node")
.data(bubble.nodes(classes(root))
.filter(function(d) { return !d.children; }));
node.enter()
.append("g")
.attr("class", "node")
.attr("transform", function (d) { return "translate(" + d.x + "," + d.y + ")"; });
node.select("circle")
.transition()
.duration(1000)
.attr("r", function(d) { return d.r; })
.style("fill", function(d,i) { return color(i); });
node.transition().attr("class", "node")
.attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });
node.append("circle")
.attr("r", function (d) { return d.r; })
.style("fill", function (d, i) { return …推荐指数
解决办法
查看次数
包装不同大小的不规则多边形
这是我的第一篇文章,如果我违反任何礼仪规则,请告诉我.
我正在尝试在python中编写一个程序,其中包含形状文件(现在是国会区)并用圆圈"打包"它们.最终目标是获得圆的中心点和半径.我想以最少的圆圈覆盖最大区域.
到目前为止,我通过谷歌找到的所有资源都是关于标准几何对象(如正方形/圆形/三角形等)中的圆形包装......所以我的本能是尝试将这些形状转换为三角形或其他东西,然后应用一些现有的算法更简单的形状.
如果形状有很多小的凹边,这似乎是解决问题的正确途径吗？或者是否有一些我无法通过谷歌找到的算法,任何人都知道这已经做到了？总计算几何noob但愿意学习.
推荐指数
解决办法
查看次数
如何在d3.js中的包布局中插入饼图？
Hello All而不是简单的Circles,我想在我的Pack布局中添加饼图.
让我们假设这是我的饼图数据和饼图布局
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; });
这就是packlayout如何绘制圆圈的方式
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("click", function(d) { if (focus !== d) zoom(d), d3.event.stopPropagation(); });
任何人都可以解释我如何而不是在包布局中添加圆圈我宁愿添加路径并制作饼图吗？![在此处输入图像描述] [1]
推荐指数
解决办法
查看次数
使用ggplot2创建类似于d3.js强制布局的气泡图
是否可以使用 制作与此类似的气泡图R，最好是ggplot2？
鉴于此示例中有三个类别，属性是
- 所有圆圈都相互吸引（将圆圈聚集在一起）
- 碰撞检测（停止圆圈重叠）
- 圆圈被吸引到三个中心之一，这取决于它们的类别
数据（虽然我真的很确定这种情节的数据应该是什么样的）
set.seed(1)
dat <- data.frame(category = rep(c("A", "B", "C"), each = 10),
bubble = rep(1:10, 3),
radius = round(runif(30, min = 0.5, max = 3), 2),
stringsAsFactors = FALSE)
dat
我用d3.js标记它- 我不熟悉 - 尽管问题是关于 但是可以随意编辑标签和/或帖子。R. 我希望能吸引熟悉两者的社区成员。
谢谢。
推荐指数
解决办法
查看次数
如何为 D3 圆圈包布局中的每个圆圈着色
以下是 d3js 中的包布局示例：
是否可以控制各个圆圈的颜色？
这是带有颜色的包布局的另一个示例：
您能帮我了解如何将颜色分配给第二张图表中的气泡吗？
推荐指数
解决办法
查看次数
点击d3.js圈包的活动
我可以在d3.js中绘制气泡图.此外,当我点击任何圈子时,我收到警报信息.但当我点击圈外区域时,我仍然收到警报信息.我不希望在我的圈子包外面有任何可点击的区域.请帮忙.看看我的例子.
Data.json
{
"chartData": [
{
"name": "Type1",
"size": 12,
"color": "red"
},
{
"name": "Type2",
"size": 28,
"color": "yellow"
},
{
"name": "Type3",
"size": 36,
"color": "blue"
},
{
"name": "Type4",
"size": 24,
"color": "green"
}
]
}
var diameter = 450,
format = d3.format(",d"),
color = d3.scale.category20c();
var bubble = d3.layout.pack()
.sort(null)
.size([diameter, diameter]);
var svg = d3.select('#bubbleId').append("svg")
.attr("width", diameter)
.attr("height", diameter)
.attr("class", "bubble");
d3.json("data.json", function(error, root) {
var node = svg.selectAll(".node")
.data(bubble.nodes(classes(root))
.filter(function(d) { return !d.children; })) …推荐指数
解决办法
查看次数
用 Python 控制圆形包装
我正在尝试将我在此处找到的“带处理的受控圆包装”算法移植到 Python：
现在我的目标只是让它工作，然后我根据自己的需要调整它。这个问题不是关于做圆形包装的最佳方法。
到目前为止，这是我所拥有的：
#!/usr/bin/python
# coding: utf-8
import numpy as np
import matplotlib.pyplot as plt
from random import uniform
class Ball:
def __init__(self, x, y, radius):
self.r = radius
self.acceleration = np.array([0, 0])
self.velocity = np.array([uniform(0, 1),
uniform(0, 1)])
self.position = np.array([x, y])
@property
def x(self):
return self.position[0]
@property
def y(self):
return self.position[1]
def applyForce(self, force):
self.acceleration = np.add(self.acceleration, force)
def update(self):
self.velocity = np.add(self.velocity, self.acceleration)
self.position = np.add(self.position, self.velocity)
self.acceleration *= 0
class Pack:
def __init__(self, radius, …推荐指数
解决办法
查看次数
D3js:绘制没有最外圈的包装布局
我试图在没有外部变量的d3.js中绘制包布局.我想绘制一个没有最外面的父圆圈的包布局.有什么办法吗？
推荐指数
解决办法
查看次数