在D3.JS

中创建项目块的最好方法是什么？我是D3.JS的新手，我非常惊讶创建svg块的方式，我发现压倒性的，我会解释我的自我需要例如代码一个这样的HTML div块如此在D3.JS

与HTML和CSS它非常容易和简单，代码是可重复使用的，我发现我的自定义项目通过试图附加到根svg通过追加和静态x和y和一些奇怪的方式来添加字形，以及它给了我这样的事情：

svg.attr({ width: 500, height: 500 }); 

    var rectangle = svg.append("rect"). 
    attr("width", 300). 
    attr("height", 100).attr("fill", "#3b3e3f"); 


    var rectangleIndexes = svg.append("rect"). 
    attr("width", 50). 
    attr("height", 100).attr("fill", "#303233"); 

    var edit = svg.append("rect"). 
    attr("width", 30). 
    attr("height", 30). 
    attr("x", 10). 
    attr("y", 10). 
    attr("fill", "#454a4d"); 

    var editBtn = svg.append("svg:foreignObject") 
     .attr("width", 20) 
     .attr("height", 20) 
     .attr("y", "15px") 
     .attr("x", "18px") 
     .append("xhtml:span") 
     .attr("class", "control glyphicon glyphicon-pencil") 
     .attr("style", "color :#fff"); 

etc...

是否有任何其他方式（S）要做到这一点，因为我已经习惯了HTM l/css如果我们可以在svg中导入html代码或者更简单并且可重用的东西，那将会很好。

感谢您的帮助。

来源

2017-03-17 walox

第一个问题，如果你想要HTML/CSS，你为什么要将它们附加到SVG？

第二件事，d3并不意味着你不能使用CSS。如果你不想要，你不需要内联样式。只要给他们分班。

三，您错过了d3这一点。这完全是关于通过数据来驱动你的显示器（3ds是d ata d riven d ocuments）。你的数据在这里是每个“块”的数组元素。

是这样的（请原谅我的可怕的CSS）：

<!DOCTYPE html> 
 
<html> 
 

 
    <head> 
 
    <script data-require="[email protected]" data-semver="3.0.0" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.js"></script> 
 
    <link data-require="[email protected]" data-semver="3.3.7" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" /> 
 
    <script data-require="[email protected]" data-semver="3.3.7" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
    <script data-require="[email protected]" data-semver="3.5.17" src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.js"></script> 
 
    <style> 
 
     .my-block { 
 
     width: 100px; 
 
     height: 100px; 
 
     background-color: steelblue; 
 
     box-shadow: 10px 10px 5px #888888; 
 
     float: left; 
 
     margin: 20px; 
 
     position: relative; 
 
     } 
 
     .icon { 
 
      position:absolute; 
 
      top: 80px; 
 
      right: 5px; 
 
      color: #fff; 
 
     } 
 
     .text { 
 
      position:absolute; 
 
      top: 40px; 
 
      left: 25px; 
 
      color: #fff; 
 
     } 
 
    </style> 
 
    </head> 
 

 
    <body> 
 
    <script> 
 
    var data = [ 
 
     { 
 
     name: "block 1", 
 
     icon: "glyphicon-pencil" 
 
     },{ 
 
     name: "block 2", 
 
     icon: "glyphicon-film" 
 
     },{ 
 
     name: "block 3", 
 
     icon: "glyphicon-off" 
 
     },{ 
 
     name: "block 4", 
 
     icon: "glyphicon-user" 
 
     } 
 
    ]; 
 
    
 
    var body = d3.select('body'); 
 
    
 
    var divs = body.selectAll('.my-block') 
 
     .data(data) 
 
     .enter() 
 
     .append('div') 
 
     .attr('class', 'my-block') 
 
     
 
    divs.append('span') 
 
     .text(function(d){ 
 
     return d.name; 
 
     }) 
 
     .attr("class", "text"); 
 
     
 
    divs.append('span') 
 
     .attr("class", function(d){ 
 
     return "icon control glyphicon " + d.icon; 
 
     }); 
 
    
 
    </script> 
 
    </body> 
 

 
</html>

来源

2017-03-17 16:46:41 Mark

我选择SVG，因为我要画树的观点与我的块和一些缩放/平移和拖/放 – walox

回答

相关问题