我试图将我的d3构建保留在受约束的div内,但没有成功。 这是我到目前为止的内容-

var width = 960,
height = 570,
root;

var force = d3.layout.force()
.linkDistance(120)
.charge(-200)
.gravity(.05)
.size([width, height])
.on("tick", tick);

var svg = d3.select("#powerchart").append("svg:svg")
.attr("width", width)
.attr("height", height);

var link = svg.selectAll(".link"),
node = svg.selectAll(".node");

d3.json('/assets/images/graph.json', function(error, json) {
root = json;
update();
});

function update() {
var nodes = flatten(root),
  links = d3.layout.tree().links(nodes);

// Restart the force layout.
force
  .nodes(nodes)
  .links(links)
  .start();

// Update links.
link = link.data(links, function(d) { return d.target.id; });

link.exit().remove();

link.enter().insert("line", ".node")
  .attr("class", "link");

  // Update nodes.
  node = node.data(nodes, function(d) { return d.id; });

  node.exit().remove();

var nodeEnter = node.enter().append("g")
  .attr("class", "node")
  .on("click", click)
  .call(force.drag);

nodeEnter.append("circle")
.attr("r", 1)
.transition()
.delay(function(d, i) { return i*60; })// <-- delay as a function of i
.attr("r", function(d) { return Math.sqrt(d.size) / 2 || 25; });

nodeEnter.append("text")
.transition()
.delay(function(d, i) { return i*60; })// <-- delay as a function of i
  .attr("dy", ".35em")
  .text(function(d) { return d.name; });

node.select("circle")
  .style("fill", color);

}

 function tick() {
 link.attr("x1", function(d) { return d.source.x; })
  .attr("y1", function(d) { return d.source.y; })
  .attr("x2", function(d) { return d.target.x; })
  .attr("y2", function(d) { return d.target.y; });

 node.attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });
}

function color(d) {
return d._children ? "#ffffff" // collapsed package
  : d.children ? "#ffffff" // expanded package
  : "#c9c9c9"; // leaf node
}

// Toggle children on click.
function click(d) {
if (d3.event.defaultPrevented) return; // ignore drag
if (d.children) {
 d._children = d.children;
 d.children = null;
} else {
d.children = d._children;
d._children = null;
}
update();
updateSide(d);
}

// Returns a list of all nodes under the root.
function flatten(root) {
  var nodes = [], i = 0;

function recurse(node) {
if (node.children) node.children.forEach(recurse);
if (!node.id) node.id = ++i;
nodes.push(node);
 }

 recurse(root);
 return nodes;
 }

 function updateSide(node){

$("#nodeHead").empty();
$("#nodeEmailFirst").empty();
$("#nodeEmailLast").empty();
$("#nodeHead").append(node.name);
$("#nodeEmailFirst").append(node.firstEmail + " years ago");
$("#nodeEmailLast").append(node.lastEmail + " years ago");
}

我想知道将这些限制在父div吗?

  ask by ajmajmajma translate from so

本文未有回复,本站智能推荐:

1回复

d3绘图太大,无法包含div

当我使用d3绘制图表时,会创建一个名为node的div。 我追加此node到主体,设置node作为绘制的内部图表的控制器上的属性node )。 在我调整图表大小的函数中,我说this.width = this.node.width() ,当我绘制图表时,我有: 为什么d3图看起来比包含图
1回复

将d3地理图块中的缩放限制为“最大”

当您使用某些图块集(例如.tiles.mapbox.com/v3/mapbox.natural-earth-2/ )时,应将d3地理图块的缩放限制为最大,否则这些图块不存在,无法找到,最后显示难看的“找不到”背景图片。 我创建了一个小提琴 (由Lex提供 ),向您展示我的确切意思。 尝试单
1回复

在div或td等html元素中包含D3图表?

我最近开始使用HTML来处理D3图表,而我曾经使用的大多数图表似乎都添加到了HTML元素中,例如<div> , <td>等。 对于此D3径向条形图 ,它似乎不是html元素的一部分。 例如,我想在其周围添加边框,所以我想也许将其包含在div或表中,然后将边框添加到h
1回复

d3如何限制拖放区域

我有一些带有拖放支持的d3代码。 我有一个导入的SVG,其中的多边形区域有限。 我需要将RECS添加到该区域,并在该区域边界内限制拖放支持。 有谁知道如何做到这一点? 主要问题是我无法执行计算该面积的函数,因为它是可变的。 非常感谢您的帮助! 注意:我创建了一个jsfiddle链
2回复

将进入/退出事件限制为仅d3.js中的背景div

当光标移动到包含SVG的特定DIV上时,我想显示带坐标的移动十字线。 在mouseenter我可以成功创建一个显示坐标的rect (并在mouseout上删除它),但是,将光标移动到新创建的rect或文本本身会触发mouseout mouseenter事件循环。 我在几个地方尝试过d3.
1回复

d3过渡以扩展div

我想在d3对象中创建一个过渡,将鼠标悬停在svg矩形上,然后将div扩展到svg对象之外,并在其中添加数据值: 我的div有以下变量: 为了扩展我的svg对象悬停的answer : 但是它不起作用,在处理div的高度时我做错了什么吗? 除此以外,还有一些其他转换都在起作用。
1回复

D3定位在div内

我有一个D3.js图,我想将其放置在日历的第31天。 当前,即使标签位于正确的位置,图形也位于日历下方。 http://jsfiddle.net/Hunter275/LYyCp/
1回复

带有div和d3缩放的d3力图

您好Stackoverflowcommunity! 我在以d3force定向的图形中运行d3缩放时遇到问题。 我可以实现它正在缩放和平移,但是这样做破坏了节点和链接之间的对齐,而且我不知道该如何解决...。我创建了一个小提琴,显示了我的意思。 https://jsfiddle.net/5j