顯示選擇選項d3.js

Question

我試圖把一個選擇選項d3.js一個div裏面，但我不能，這是我使用的代碼：

var vis = d3.select(".dashboard") 
      .select("#sowing") 
      .append("div") 
      .append("svg") 
      .attr("id", "chartID") 
      .attr("class", "boxing") 
      .attr("preserveAspectRatio", "xMinYMin meet") 
      .attr("viewBox", "0 0 540 250") 
      .append("g") 
      .attr("transform", "translate(" + 550/2 + "," + 300/2 + ")"); 


     var select = vis.append('select') 
       .attr("name", "dept-list") 
       .attr("class", "form-control"); 

      var options = select 
       .selectAll('option') 
       .data(data) 
       .enter() 
       .append('option') 
       .text(function(d) { 
        return d.text; 
       }) 
       .attr("value", function(d) { 
        return d.id; 
       }); 

在這JSFIDDLE顯示代碼，看看哪個是我想要的

謝謝！

Answer 1

的解釋很簡單：你不能追加一個HTML元素（可以是<div>，<h1>，<p>，<select>等）到SVG。它會在您檢查DOM時顯示，但實際SVG中不會顯示任何內容。

這裏最好的解決方案是：不要將HTML元素附加到SVG。

但是，如果（無論出於何種原因）您確實需要在SVG內創建此下拉列表，則可以使用foreignObject。這不是一個好的解決方案，它不會在IE上運行。不過，如果你想這樣做，試試這個：

var foreign = vis.append("foreignObject") 
    .attr("width", 100) 
    .attr("height", 100) 
    .append("xhtml:body"); 

var select = foreign.append('select') 
    .attr("name", "dept-list") 
    .attr("class", "form-control"); 

這是你更新的提琴：https://jsfiddle.net/ntxoyhoz/