读取Json文件时，它不理解HTML内容吗？

Question

I was expecting my HTML page to display the json content in the HTML element specified for example in this case Display data in red colour However it would just not do it and display it as it is ?. 我期望我的HTML页面在指定的HTML元素中显示json内容，例如，在这种情况下，以红色显示数据。但是，它不会这样做并按原样显示它。 I am using D3 data driven document to display json data in the form of a tree(parent-child relationship). 我正在使用D3数据驱动的文档以树（父子关系）的形式显示json数据。 Is it possible of what i am trying ? 我正在尝试的可能吗？

IMAGE: 图片：

在此处输入图片说明

Json file: 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: 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>

Solution: 解：

//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);

Answer 1

It depends how much data you're working with, and whether you are able to go back through it all and clean it up manually. 这取决于您正在使用多少数据，以及是否能够全部浏览并手动清理。 The cleanest solution would be as Justin Niessner mentioned, to remove the html markup from the json file, and add a color property to each entry: 就像Justin Niessner提到的那样，最干净的解决方案是从json文件中删除html标记，并为每个条目添加color属性：

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

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

         ]
      }
   ]
}

If you aren't able to edit the data directly, or there is too much of it to edit manually, you could use regular expressions to get the parts of the string that you want to use. 如果您无法直接编辑数据，或者无法手动编辑太多数据，则可以使用正则表达式来获取要使用的字符串部分。

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

then when you draw your text element you would write: 然后，当您绘制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);

Check out this fiddle to see what those regular expressions are doing. 查看这个小提琴，看看那些正则表达式在做什么。

Answer 2

All of your javaScript code creates SVG elements, not HTML. 您所有的javaScript代码都会创建SVG元素，而不是HTML。 D3 will simply render everything you give the <text> block as text rather than render it as HTML somehow and then convert to SVG. D3将简单地将您给<text>块的所有内容呈现为文本，而不是以某种方式呈现为HTML，然后转换为SVG。

I would suggest simply adding a color property to your JSON object. 我建议将color属性简单地添加到JSON对象中。 You could then change your rendering code to: 然后，您可以将渲染代码更改为：

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

读取Json文件时，它不理解HTML内容吗？

问题描述

2 个解决方案

解决方案1
1 2014-04-17 08:48:11

解决方案2
0 2014-04-17 02:03:37

读取Json文件时，它不理解HTML内容吗？

问题描述

2 个解决方案

解决方案1 1 2014-04-17 08:48:11

解决方案2 0 2014-04-17 02:03:37

解决方案1
1 2014-04-17 08:48:11

解决方案2
0 2014-04-17 02:03:37