在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

回答

相關問題