繁体   English   中英

将d3限制为包含div

Keep d3 constrained to containing div

提示:本站收集StackOverFlow近2千万问答,支持中英文搜索,鼠标放在语句上弹窗显示对应的参考中文或英文, 本站还提供   中文繁体   英文版本   中英对照 版本,有任何建议请联系yoyou2525@163.com。

我试图将我的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吗?

问题暂未有回复.您可以查看右边的相关问题.
1 将组件的大小限制为包含div的高度

我的布局包含顶部的工具栏,左侧的侧边,其余的是内容。 sidenav包含搜索框和项目列表。 我想要的结果是sidenav高度将是它所在行的大小,并且列表将溢出并在该高度内滚动。 但是我无法使内部滚动起作用,因为内部组件的高度大于包含div的高度,并且设置height: 100%不起作用 ...

2 d3绘图太大,无法包含div

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

3 如何将可排序的包含属性限制为任何div?

containment属性将元素的拖动限制到浏览器窗口的边缘。 这给了我滚动条很长的空间,我现在在div drop_down_list有一个列表,以便使可排序我写了以下代码: 但是,当我将li元素拖到div之外时,滚动条仍在增加,并且在div空格后,放下所有元素就可以了。 我想将滚动 ...

4 将脚本限制为某个div

我需要在网站中集成旧的会员标头。 由于他们的脚本和CSS文件经常与我的文件相撞,这真是令人头疼。 如果我在页面中使用jquery,并且集成的标头引用了旧版本的jquery,则我的页面上会出现很多JavaScript错误。 我无法将标头添加到iframe中,因为它们经常带有带有下拉菜单的导航 ...

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

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

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

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

8 将输入限制为a,b或d

我正在创建一个选择题测验应用程序,并且试图创建验证箱。 用户必须在a,b,c或d之间进行选择,而我需要使用try and catch将输入限制为这些选择。 问题是这些变量的变量类型是字符串,必须是字符串。 问题在于程序正在接受任何字符串(应该如此)。 但是有没有办法将其限制为仅这四个选择 ...

9 将文本限制为div的问题

早些时候,我在有关文本溢出以及如何将其纳入新的div的一些问题上获得了很好的帮助。 参考: jQuery之后的文本格式问题 现在,我看到通过不同的浏览器(即IE11和Chrome)显示文本的方式有所不同。 我知道这很正常,但是我想知道我可以在代码中进行哪些更改以使其显示相似。 您可以 ...

10 将打印区域限制为div

有没有办法只在Windows上的IE8中使用css(而不是javascript)打印嵌套的“id = printarea”div(带样式)? 我尝试过使用css,但由于继承,它显然没有显示任何内容。 以下示例显示了我的意图。 我已成功使用javascript(有效),但我认为它 ...

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2022 STACKOOM.COM