Fatal编程技术网
  • javascript/
  • Javascript 如何将容器添加到force布局？

Javascript 如何将容器添加到force布局？

javascript css d3.js

Javascript 如何将容器添加到force布局？,javascript,css,d3.js,containers,force-layout,Javascript,Css,D3.js,Containers,Force Layout,基于此力布局的简单基本示例： 我尝试添加一个带有滚动条的容器，称为svg2，并将以下代码添加到force布局中： var content = document.getElementById('viz'); var svg2 = d3.select("#viz") .append("svg") .attr("width", 3000) .attr("height", 300); 还有这个div元素： <div class="container"> <div id="vi

基于此力布局的简单基本示例：

我尝试添加一个带有滚动条的容器，称为
svg2
，并将以下代码添加到force布局中：

var content = document.getElementById('viz');

var svg2 = d3.select("#viz")
.append("svg")
.attr("width", 3000)
.attr("height", 300);
还有这个div元素：

<div class="container">
  <div id="viz" class="content"></div>            
</div>
我只是想知道，我在这里做错了什么，因为容器根本没有出现。但是相同的代码在没有强制布局的空代码上工作。非常感谢你的帮助！以下是完整的代码：

    <!DOCTYPE html>
    <meta charset="utf-8">
    <style>

    .link {
      stroke: #ccc;
    }

    .node text {
      pointer-events: none;
      font: 10px sans-serif;
    }

    </style>

<div class="container">
  <div id="viz" class="content"></div>            
</div>



    <body>
    <script src="//d3js.org/d3.v3.min.js"></script>
    <script>



var content = document.getElementById('viz');

var svg2 = d3.select("#viz")
.append("svg")
.attr("width", 3000)
.attr("height", 300);




    var width = 960,
        height = 500

    var svg = d3.select("body").append("svg")
        .attr("width", width)
        .attr("height", height);

    var force = d3.layout.force()
        .gravity(0.05)
        .distance(100)
        .charge(-100)
        .size([width, height]);

    d3.json("graph.json", function(error, json) {
      if (error) throw error;

      force
          .nodes(json.nodes)
          .links(json.links)
          .start();

      var link = svg.selectAll(".link")
          .data(json.links)
        .enter().append("line")
          .attr("class", "link");

      var node = svg.selectAll(".node")
          .data(json.nodes)
        .enter().append("g")
          .attr("class", "node")
          .call(force.drag);

      node.append("image")
          .attr("xlink:href", "https://github.com/favicon.ico")
          .attr("x", -8)
          .attr("y", -8)
          .attr("width", 16)
          .attr("height", 16);

      node.append("text")
          .attr("dx", 12)
          .attr("dy", ".35em")
          .text(function(d) { return d.name });

      force.on("tick", function() {
        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 + ")"; });
      });
    });

    </script>


.链接{
冲程：#ccc；
}
.节点文本{
指针事件：无；
字体：10px无衬线；
}
var content=document.getElementById（'viz'）；
var svg2=d3.选择（“即”）
.append（“svg”）
.attr（“宽度”，3000）
.attr（“高度”，300）；
可变宽度=960，
高度=500
var svg=d3.选择（“正文”）.追加（“svg”）
.attr（“宽度”，宽度）
.attr（“高度”，高度）；
var-force=d3.layout.force（）
.重力（0.05）
.距离（100）
。收费（-100）
.尺寸（[宽度、高度]）；
d3.json（“graph.json”，函数（错误，json）{
如果（错误）抛出错误；
力
.nodes（json.nodes）
.links（json.links）
.start（）；
var link=svg.selectAll（“.link”）
.data（json.links）
.enter（）.append（“行”）
.attr（“类”、“链接”）；
var node=svg.selectAll（“.node”）
.data（json.nodes）
.enter（）.append（“g”）
.attr（“类”、“节点”）
.呼叫（强制拖动）；
node.append（“图像”）
.attr（“xlink:href，”https://github.com/favicon.ico")
.attr（“x”，-8）
.attr（“y”，-8）
.attr（“宽度”，16）
.attr（“高度”，16）；
node.append（“文本”）
.attr（“dx”，12）
.attr（“dy”，“.35em”）
.text（函数（d）{返回d.name}）；
force.on（“勾号”，函数（）{
attr（“x1”，函数（d）{返回d.source.x；}）
.attr（“y1”，函数（d）{返回d.source.y；}）
.attr（“x2”，函数（d）{返回d.target.x；}）
.attr（“y2”，函数（d）{返回d.target.y；}）；
attr（“transform”，函数（d）{return“translate”（“+d.x+”，“+d.y+”）”）；}）；
});
});

该div是否在正文外？您的HTML仍然不正确。请重新编辑。首先，您没有关闭正文。第二，div在脚本中。现在它又在主体之外了！如果你不分享你的HTML的确切结构，这将无法帮助你。请发布你的解决方案