标签: circle-pack

我用d3.svg.diagonal()渲染了边缘,实现了下图.但是,当我尝试用d3.svg.line()替换对角线时,它似乎不会拉动目标和源数据.我错过了什么？关于d3.svg.line有什么我不懂的吗？

以下是我所指的代码,后面是完整代码:

var line = d3.svg.line()
    .x(function(d) { return d.lx; })
    .y(function(d) { return d.ly; });

...

var link= svg.selectAll("path")
    .data(links)
  .enter().append("path")
    .attr("d",d3.svg.diagonal())
    .attr("class", ".link")
    .attr("stroke", "black")
    .attr("stroke-width", "2px")
    .attr("shape-rendering", "auto")
    .attr("fill", "none"); 

整个代码:

var margin = {top: 20, right: 20, bottom: 20, left: 20},
    width =1500, 
    height = 1500, 
    diameter = Math.min(width, height),
    radius = diameter / 2;


var balloon = d3.layout.balloon()
  .size([width, height])
  .value(function(d) { return d.size; })
  .gap(50)                  

var line = d3.svg.line()
    .x(function(d) { return d.lx; }) …

我正在使用THREE.js在球体上创建点,类似于元素周期表示例

我的数据集是一个不规则大小的圆圈,我希望将它们均匀地分布在球体表面周围.经过几个小时的网络搜索,我意识到这比听起来要困难得多.

以下是这个想法的实例:

VIMEO

PIC

circlePack java applet

任何人都可以帮我指点找到一个允许我这样做的算法吗？打包率不需要非常高,理想情况下,它可以快速轻松地在javascript中进行计算,以便在THREE.js(笛卡尔坐标系或坐标系)中进行渲染.效率是关键.

编辑:圆半径可以广泛变化.以下是使用周期表代码的示例:

我试图围绕d3的包布局(http://bl.ocks.org/4063530).

我有基本的布局工作,但我想用新数据更新它.即收集新数据,将其绑定到当前layout.pack并相应更新(更新/退出/输入).

我的尝试在这里(http://jsfiddle.net/emepyc/n4xk8/14/):

var bPack = function(vis) {
    var pack = d3.layout.pack()
    .size([400,400])
    .value(function(d) {return d.time});

    var node = vis.data([data])
    .selectAll("g.node")
    .data(pack.nodes)
    .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("circle")
    .attr("r", function(d) { return d.r });

    node.filter(function(d) { return !d.children; }).append("text")
    .attr("text-anchor", "middle")
    .attr("dy", ".3em")
    .text(function(d) { return d.analysis_id });

    bPack.update = function(new_data) {
        console.log("UPDATE");

        node …

我有基于本教程的气泡图.

我已使用以下代码启用了拖动气泡.这使得各个圆圈可以拖动,但拖动圆圈时其他圆圈不会自动调整.我正在使用包循环算法,请让我知道这个算法可能.

这是我的拖动代码:

// draggable
if(this.dragging){
    var drag = d3.behavior.drag()
    .on("drag", function( d, i) {
        var selection = d3.selectAll( '.selected');

        if( selection[0].indexOf( this)==-1) {
            selection.classed( "selected", false);
            selection = d3.select( this);
            selection.classed( "selected", true);
        } 

        selection.attr("transform", function( d, i) {
            d.x += d3.event.dx;
            d.y += d3.event.dy;
            return "translate(" + [ d.x,d.y ] + ")"
        })
        // reappend dragged element as last 
        // so that its stays on top 
        this.parentNode.appendChild( this);
        d3.event.sourceEvent.stopPropagation();
    });
    node.call( drag);
}

我有一组数据,我使用d3.js可视化.我以气泡的形式表示数据点,其中气泡的配置如下:

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")
   .attr("x", function(d) { return xp(x(d)); })
   .attr("y", function(d) { return yp(y(d)); })
   .text(function(d) { return d.name; })

其中xp,yp,colorp和radiusp定义如下:

var xp = d3.scale.log().domain([300, 1e5]).range([0, width]),
   yp = d3.scale.linear().domain([10, 85]).range([height, 0]),
   radiusp = d3.scale.sqrt().domain([0, 5e8]).range([0, 40]),
   colorp = d3.scale.category10();

此时,气泡在其位置上显示为静态(其中位置由xp和yp定义),而气泡的大小基本上来自radiusp,颜色由colorp定义.

现在我正如这个例子那样展示它们: http ://bl.ocks.org/mbostock/4063269

我需要的是以这种形式显示它们: http …

这个圆包布局示例(http://bl.ocks.org/4063269)非常适合我正在处理的项目,但它会相对于彼此调整所有圆的大小:

有没有一种简单的方法来为每个圆指定固定半径？

我已经搜索了源代码,示例,谷歌和stackoverflow,似乎找不到任何有用的东西.

圆圈的确切尺寸对我来说很重要.

所以我使用与这个D3库示例相同的代码(使用我自己的数据):

http://bl.ocks.org/mbostock/4063269

我想得到一个气泡图,其中圆圈排列在中心最大,然后向外辐射到最小.

这是我在Photoshop中创建的模拟:

以下是我使用该示例时获得的内容(默认排序算法的默认圆形打包算法):

我尝试调整排序(包括尝试d3.ascending和d3.descending).我能想出的最好的东西基本上是用一个常数来破坏排序(哈哈!),但仍然远非我想要的:

//...
.sort( function(a, b) { return -1;} )
//...

好的,那么在不必改变实际的D3包布局算法的情况下可以做到这一点吗？如果没有,也许有人已经扩展或修改了包布局,并且可以告诉我可以在D3源中更改的5行来破解它.

提前致谢!

编辑:

根据要求,这是我正在使用的代码.基本上与上面的链接样本相同,有一些表面的变化,如注释行所示:

var diameter = 960,
format = d3.format(",d"),
color = d3.scale.category20c();

var bubble = d3.layout.pack()
//  .sort(null)
//  .sort(d3.ascending)
//  .sort(d3.descending)
    .sort( function(a, b) { return  -1;} ) // basically a < b always
    .size([diameter, diameter])
    .padding(1.5);

var svg = d3.select("body").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; }))
        .enter().append("g") …

我有一个圆弧,目前属于该弧的圆点使用d3.layout.pack()来放置它们,但这只是将圆弧中的圆点明显地放在一个圆圈中.

有没有办法让我可以将圆点放在圆弧中以使用圆弧的整个空间(目前它只是将圆弧中心的点聚集成一个圆圈)

我试着搞乱填充,但显然它不是我需要的,因为它可以将圆点推出弧线的边界

谢谢马克

编辑 - 代码 代码只是标准的布局包代码.我试图看看是否有一种方法可以将圆点中的点"打包".

var pack = d3.layout.pack()
.sort(null)
.size([_config.RingWidth, _config.RingWidth])//config.RingWidth is the width of the arc
.value(function (d) {
  return 1 * Math.random();//the dots are all the same size
});

然后处理这些点并使用包

dots2 = new Array();
for (var clusterNum = 0; clusterNum < _hierarchy.Dots.dotsArray.length; clusterNum++) {
    dots2[clusterNum] = svg.selectAll(".node" + clusterNum)
      .data(pack.nodes(_hierarchy.Dots.dotsArray[clusterNum])
      .filter(function (d) {
         return !d.children;
}));

顶部图像是它当前的功能,底部是我希望它如何运作.正如你在大弧中所看到的那样,它看起来很奇怪,它不能使用所有的弧线,但我失去了如何实现这一点(我尝试填充包但但它超出了弧的边界).

干杯

我一直在玩圈装样品.但是,我在尝试从一组新的JSON数据更新事物并在之后刷新它时遇到了很多麻烦.

我的代码只是circle pack示例的修改版本:

var diameter = 960,
    format = d3.format(",d");

var pack = d3.layout.pack()
    .size([diameter - 4, diameter - 4])
    .value(function(d) { return d.size; });

var svg = d3.select("body").append("svg")
    .attr("width", diameter)
    .attr("height", diameter)
    .append("g")
    .attr("transform", "translate(2,2)");

var node;

d3.json("data1.json", function(error, root) {

    node = svg.datum(root).selectAll(".node")
      .data(pack.nodes);

    node.enter().append("g")
      .classed("node", true)
      .attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });

    node.append("title")
      .text(function(d) { return d.name; });

    node.append("circle")
            .attr("r", 0)
        .on("click", refresh)
            .transition()
            .duration(2000)
        .attr("r", function(d) …

我在这里敲我的头.我想在Zoomable Pack Layout等结构中显示叶节点的工具提示.叶节点是棕色节点.如果我使用工具提示的标准代码:

vis.selectAll("circle")
    .data(nodes)
   .enter()
    .append("svg:circle")
    .attr("class", function(d) {
        return d.children ? "parent" : "child";
    })
    .attr("cx", function(d) {
        return d.x;
    })
    .attr("cy", function(d) {
        return d.y;
    })
    .attr("r", function(d) {
        return d.r;
    })
    .on("click", function(d) {
        zoom(node == d ? root : d);
    })
    .append("svg:title")
    .text("test");          \\ Browser uses this for tooltips

我在主要圆圈上获得了工具提示,但在叶子节点上没有.我试过了:

.append("svg:title")
.text(function(d) {
    if(d.size){return 'test';}
});

...希望只有当叶子节点包含的变量存在时返回一些东西可能会阻止父节点显示工具提示,但我担心它所做的一切都是允许隐藏的工具提示默默地阻止任何显示.

有什么想法吗？我想我要么堆叠svg:circles,以便叶节点在其他节点前面,或者只将svg:titles附加到叶节点,但我不知道如何做到这一点.

这是工具提示的小提琴: 小提琴