閱讀Json文件時，它不會理解HTML內容？

我期待我的HTML頁面顯示在例如指定的HTML元素中的json內容，例如在這種情況下顯示紅色的數據然而，它不會這樣做，並顯示它，因爲它？我正在使用D3數據驅動的文檔以樹（父 - 子關係）的形式顯示json數據。我在嘗試什麼？閱讀Json文件時，它不會理解HTML內容？

IMAGE：

enter image description here

JSON文件：

{ 
    "name":"Business Direction IM RM", 
    "children":[ 
     { 
     "name":" <font color=\"red\">Sean /Bur/XYZ<\/font> ", 
     "children":[ 

     ] 
     }, 
     { 
     "name":" <font color=\"red\">Vijay /Fish/XYZ<\/font> ", 
     "children":[ 

     ] 
     } 
    ] 
}

HTML：

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

.node { 
    cursor: pointer; 
} 

.node circle { 
    fill: #fff; 
    stroke: steelblue; 
    stroke-width: 1.5px; 
} 

.node text { 
    font: 11px sans-serif; 
    font-weight:900; 
    font-size:12px; 
} 

.link { 
    fill: none; 
    stroke: #ccc; 
    stroke-width: 2.5px; 
} 

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

var margin = {top: 40, right: 220, bottom: 20, left: 220}, 
    width = 500 - margin.right - margin.left, 
    height = 500 - margin.top - margin.bottom; 

var i = 0, 
    duration = 1750, 
    root; 

var tree = d3.layout.tree() 
    .size([height, width]); 

var diagonal = d3.svg.diagonal() 
    .projection(function(d) { return [d.y, d.x]; }); 

var svg = d3.select("body").append("svg") 
    .attr("width", width + margin.right + margin.left) 
    .attr("height", height + margin.top + margin.bottom) 
    .append("g") 
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); 

d3.json("flare.json", function(error, flare) { 
    root = flare; 
    root.x0 = height/2; 
    root.y0 = 0; 

    function collapse(d) { 
    if (d.children) { 
     d._children = d.children; 
     d._children.forEach(collapse); 
     d.children = null; 
    } 
    } 

    root.children.forEach(collapse); 
    update(root); 
}); 

d3.select(self.frameElement).style("height", "800px"); 

function update(source) { 

    // Compute the new tree layout. 
    var nodes = tree.nodes(root).reverse(), 
     links = tree.links(nodes); 

    // Normalize for fixed-depth. 
    nodes.forEach(function(d) { d.y = d.depth * 180; }); 

    // Update the nodes… 
    var node = svg.selectAll("g.node") 
     .data(nodes, function(d) { return d.id || (d.id = ++i); }); 

    // Enter any new nodes at the parent's previous position. 
    var nodeEnter = node.enter().append("g") 
     .attr("class", "node") 
     .attr("transform", function(d) { return "translate(" + source.y0 + "," + source.x0 + ")"; }) 
     .on("click", click); 

    nodeEnter.append("circle") 
     .attr("r", 1e-6) 
     .style("fill", function(d) { return d._children ? "lightsteelblue" : "#fff"; }); 

    nodeEnter.append("text") 
     .attr("x", function(d) { return d.children || d._children ? -10 : 10; }) 
     .attr("dy", ".35em") 
     .attr("text-anchor", function(d) { return d.children || d._children ? "end" : "start"; }) 
     .text(function(d) { return d.name; }) 
     .style("fill-opacity", 1e-6); 

    // Transition nodes to their new position. 
    var nodeUpdate = node.transition() 
     .duration(duration) 
     .attr("transform", function(d) { return "translate(" + d.y + "," + d.x + ")"; }); 

    nodeUpdate.select("circle") 
     .attr("r", 4.5) 
     .style("fill", function(d) { return d._children ? "lightsteelblue" : "#fff"; }); 

    nodeUpdate.select("text") 
     .style("fill-opacity", 1); 

    // Transition exiting nodes to the parent's new position. 
    var nodeExit = node.exit().transition() 
     .duration(duration) 
     .attr("transform", function(d) { return "translate(" + source.y + "," + source.x + ")"; }) 
     .remove(); 

    nodeExit.select("circle") 
     .attr("r", 1e-6); 

    nodeExit.select("text") 
     .style("fill-opacity", 1e-6); 

    // Update the links… 
    var link = svg.selectAll("path.link") 
     .data(links, function(d) { return d.target.id; }); 

    // Enter any new links at the parent's previous position. 
    link.enter().insert("path", "g") 
     .attr("class", "link") 
     .attr("d", function(d) { 
     var o = {x: source.x0, y: source.y0}; 
     return diagonal({source: o, target: o}); 
     }); 

    // Transition links to their new position. 
    link.transition() 
     .duration(duration) 
     .attr("d", diagonal); 

    // Transition exiting nodes to the parent's new position. 
    link.exit().transition() 
     .duration(duration) 
     .attr("d", function(d) { 
     var o = {x: source.x, y: source.y}; 
     return diagonal({source: o, target: o}); 
     }) 
     .remove(); 

    // Stash the old positions for transition. 
    nodes.forEach(function(d) { 
    d.x0 = d.x; 
    d.y0 = d.y; 
    }); 
} 

// Toggle children on click. 
function click(d) { 
    if (d.children) { 
    d._children = d.children; 
    d.children = null; 
    } else { 
    d.children = d._children; 
    d._children = null; 
    } 
    update(d); 
} 

</script>

解決方案：

//Edited Code  
    nodeEnter.append("text") 
    .attr("x", function(d) { return d.children || d._children ? -10 : 10; }) 
    .attr("dy", ".35em") 
    .attr("text-anchor", function(d) { return d.children || d._children ? "end" : "start";}) 
    .attr('fill', function(d) { return d.name.color; }) 
    .style("fill-opacity", 1e-6);

來源

2014-04-17 dev_marshell08

我不認爲SVG文本節點呈現HTML。您最好將顏色存儲爲屬性，然後使用CSS或SVG樣式。 –

所有的javaScript代碼都會創建SVG元素，而不是HTML。 D3會簡單地將您以<text>塊的形式呈現爲文本，而不是將其呈現爲HTML，然後轉換爲SVG。

我會建議簡單地將color屬性添加到您的JSON對象。然後你可以改變你的渲染代碼：

nodeEnter.append('text') 
    .attr('fill', function(d) { return d.color; }) 
    // the rest of your rendering

來源

2014-04-17 02:03:37

@Justine你是說在外部的Json文件中添加一個顏色屬性？然後將上面提到的.attr（'fill'，function（d）{return d.color;}）添加到文本中？你能否詳細說明或舉個例子？ – user3398326

這取決於你有多少數據一起工作，你是否能夠通過這一切回去手動清理。最乾淨的解決辦法是賈斯汀Niessner提到的，從JSON文件中刪除HTML標記，和color屬性添加到每個條目：

{ 
    "name":"Business Direction IM RM", 
    "children":[ 
     { 
     "name": "Sean /Bur/XYZ", 
     "color": "red", 
     "children":[ 

     ] 
     }, 
     { 
     "name": "Vijay /Fish/XYZ", 
     "color": "red", 
     "children":[ 

     ] 
     } 
    ] 
}

如果您不能編輯數據直接，或有如果手動編輯過多，則可以使用正則表達式來獲取要使用的字符串部分。

var name_regexp = /.*?\<.*?\>(.*?)\<.*?\>/; 
var color_regexp = /.*?color\=\"(.*?)\".*/;

那麼當你畫你的text元素你可以這樣寫：

nodeEnter.append("text") 
    .attr("x", function(d) { return d.children || d._children ? -10 : 10; }) 
    .attr("dy", ".35em") 
    .attr("text-anchor", function(d) { 
     return d.children || d._children ? "end" : "start"; 
    }) 
    // USE THE REGEXPs HERE 
    .attr('fill', function(d) { 
     return d.name.replace(color_regexp, '$1'); 
    }) 
    .text(function(d) { 
     return d.name.replace(name_regexp, '$1'); 
    }) 
    .style("fill-opacity", 1e-6);

看看這個fiddle，看看那些正則表達式都在做。

來源

2014-04-17 08:48:11 jshanley

太棒了！你的解決方案使用正則表達式部分爲我現有的json對象工作。然而，我確實設法將顏色屬性添加到我的json對象，但是當我現在運行它時，它根本不顯示任何名稱？我已經在我的問題中粘貼了編輯過的代碼，請你檢查並指出我缺少的是什麼？ –

我認爲你在顏色屬性例子之後也缺少一個逗號：「color」：「red」， –

是的，我錯過了幾個逗號。至於上面的解決方案，您沒有爲文本節點設置任何文本。添加'.text（function（d）{return d.name;}）'行。此外，顏色線應該是'.attr（'fill'，function（d）{return d.color;}）'而不是'd.name.color' – jshanley

閱讀Json文件時，它不會理解HTML內容？

回答

相關問題