html d3.js，图像在Firefox中呈现，但不在chrome中呈现

Question

I have an html and json file running a D3 graphic that runs in firefox but does not run in chrome. 我有一个运行D3图形的html和json文件，该图形在firefox中运行，但不在chrome中运行。

The error in the console is: 控制台中的错误是：

d3.v3.min.js:1 Access to XMLHttpRequest at 'D3_least_example.json' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https. d3.v3.min.js：1 CORS策略已阻止从来源“空”访问“ D3_least_example.json”处的XMLHttpRequest：跨协议来源请求仅适用于以下协议方案：http，数据，chrome，chrome扩展， HTTPS。

Can you help me find a way to make the image render in chrome? 您能帮我找到一种使图像呈现为chrome的方法吗？

I found this related question but it didn't help. 我发现了这个相关问题，但没有帮助。

The .html and .json are a minimal complete example. .html和.json是一个最小的完整示例。

Here is the .html 这是.html

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

.node {
  font: 300 11px "Helvetica Neue", Helvetica, Arial, sans-serif;
  fill: #bbb;
}

.node:hover {
  fill: #000;
}

.link {
  stroke: steelblue;
  stroke-opacity: .4;
  fill: none;
  pointer-events: none;
}

.node:hover,
.node--source,
.node--target {
  font-weight: 700;
}

.node--source {
  fill: #2ca02c;
}

.node--target {
  fill: #d62728;
}

.link--source,
.link--target {
  stroke-opacity: 1;
  stroke-width: 2px;
}

.link--source {
  stroke: #d62728;
}

.link--target {
  stroke: #2ca02c;
}

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

var diameter = 960,
    radius = diameter / 2,
    innerRadius = radius - 200;

var cluster = d3.layout.cluster()
    .size([360, innerRadius])
    .sort(null)
    .value(function(d) { return d.size; });

var bundle = d3.layout.bundle();

var line = d3.svg.line.radial()
    .interpolate("bundle")
    .tension(.85)
    .radius(function(d) { return d.y; })
    .angle(function(d) { return d.x / 180 * Math.PI; });

var svg = d3.select("body").append("svg")
    .attr("width", diameter)
    .attr("height", diameter)
  .append("g")
    .attr("transform", "translate(" + radius + "," + radius + ")");

var link = svg.append("g").selectAll(".link"),
    node = svg.append("g").selectAll(".node");

d3.json("D3_least_example.json", function(error, classes) {
  var nodes = cluster.nodes(packageHierarchy(classes)),
      links = packageImports(nodes);

  link = link
      .data(bundle(links))
    .enter().append("path")
      .each(function(d) { d.source = d[0], d.target = d[d.length - 1]; })
      .attr("class", "link")
      .attr("d", line);

  node = node
      .data(nodes.filter(function(n) { return !n.children; }))
    .enter().append("text")
      .attr("class", "node")
      .attr("dy", ".31em")
      .attr("transform", function(d) { return "rotate(" + (d.x - 90) + ")translate(" + (d.y + 8) + ",0)" + (d.x < 180 ? "" : "rotate(180)"); })
      .style("text-anchor", function(d) { return d.x < 180 ? "start" : "end"; })
      .text(function(d) { return d.key; })
      .on("mouseover", mouseovered)
      .on("mouseout", mouseouted);
});

function mouseovered(d) {
  node
      .each(function(n) { n.target = n.source = false; });

  link
      .classed("link--target", function(l) { if (l.target === d) return l.source.source = true; })
      .classed("link--source", function(l) { if (l.source === d) return l.target.target = true; })
    .filter(function(l) { return l.target === d || l.source === d; })
      .each(function() { this.parentNode.appendChild(this); });

  node
      .classed("node--target", function(n) { return n.target; })
      .classed("node--source", function(n) { return n.source; });
}

function mouseouted(d) {
  link
      .classed("link--target", false)
      .classed("link--source", false);

  node
      .classed("node--target", false)
      .classed("node--source", false);
}

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

// Lazily construct the package hierarchy from class names.
function packageHierarchy(classes) {
  var map = {};

  function find(name, data) {
    var node = map[name], i;
    if (!node) {
      node = map[name] = data || {name: name, children: []};
      if (name.length) {
        node.parent = find(name.substring(0, i = name.lastIndexOf(".")));
        node.parent.children.push(node);
        node.key = name.substring(i + 1);
      }
    }
    return node;
  }

  classes.forEach(function(d) {
    find(d.name, d);
  });

  return map[""];
}

// Return a list of imports for the given array of nodes.
function packageImports(nodes) {
  var map = {},
      imports = [];

  // Compute a map from name to node.
  nodes.forEach(function(d) {
    map[d.name] = d;
  });

  // For each import, construct a link from the source to target node.
  nodes.forEach(function(d) {
    if (d.imports) d.imports.forEach(function(i) {
      imports.push({source: map[d.name], target: map[i]});
    });
  });

  return imports;
}

</script>

Here is the .json file named D3_least_example.json in the .html file 这是.html文件中名为D3_least_example.json文件

[

{"name":"flare.Name.3"},
{"name":"flare.Name.4"},
{"name":"flare.Name.6"},
{"name":"flare.Name.7"},
{"name":"flare.Name.8"},
{"name":"flare.Name.1"},
{"name":"flare.Name.3"},
{"name":"flare.Name.7"},
{"name":"flare.Name.8"},
{"name":"flare.Name.9"},
{"name":"flare.Name.3"},
{"name":"flare.Name.5"},
{"name":"flare.Name.4"},
{"name":"flare.Name.1"},
{"name":"flare.Name.3"},
{"name":"flare.Name.8"},
{"name":"flare.Name.9"},
{"name":"flare.Name.0"},
{"name":"flare.Name.6"},
{"name":"flare.Name.4"},
{"name":"flare.Name.3"},
{"name":"flare.Name.4"},
{"name":"flare.Name.5"},
{"name":"flare.Name.7"},
{"name":"flare.Name.6"},
{"name":"flare.Name.2"},
{"name":"flare.Name.4"},
{"name":"flare.Name.6"},
{"name":"flare.Name.8"},
{"name":"flare.Name.4"},
{"name":"flare.Name.5"},
{"name":"flare.Name.3"},
{"name":"flare.Name.2"},
{"name":"flare.Name.1"},
{"name":"flare.Name.4"},
{"name":"flare.Name.6"},
{"name":"flare.Name.9"},
{"name":"flare.Name.0"},
{"name":"flare.Name.6"},
{"name":"flare.Name.5"},
{"name":"flare.Name.4"},
{"name":"flare.Name.3"},




{"name":"flare.Library","imports":["flare.Name.3",
"flare.Name.4",
"flare.Name.6",
"flare.Name.7",
"flare.Name.8",
"flare.Name.1",
"flare.Name.3",
"flare.Name.7"]},
{"name":"flare.Home","imports":["flare.Name.8",
"flare.Name.9",
"flare.Name.3",
"flare.Name.5",
"flare.Name.4"]},
{"name":"flare.Courthouse","imports":["flare.Name.1",
"flare.Name.3",
"flare.Name.8",
"flare.Name.9",
"flare.Name.0"]},
{"name":"flare.Pub","imports":["flare.Name.6",
"flare.Name.4",
"flare.Name.3",
"flare.Name.4",
"flare.Name.5",
"flare.Name.7"]},
{"name":"flare.University","imports":["flare.Name.6",
"flare.Name.2",
"flare.Name.4",
"flare.Name.6"]},
{"name":"flare.High School","imports":["flare.Name.8",
"flare.Name.4",
"flare.Name.5",
"flare.Name.3",
"flare.Name.2",
"flare.Name.1"]},
{"name":"flare.Grocery Store","imports":["flare.Name.4",
"flare.Name.6",
"flare.Name.9",
"flare.Name.0",
"flare.Name.6",
"flare.Name.5",
"flare.Name.4",
"flare.Name.3"]}

]

This is what shows up in firefox and in chrome the screen is blank. 这就是在Firefox和chrome中显示的屏幕空白。

Windows 10 Enterprise, Version 1803, OS build 17134.407 Windows 10企业版1803，操作系统内部版本17134.407

Chrome Version 70.0.3538.110 (Official Build) (64-bit) Chrome版本70.0.3538.110（正式版本）（64位）

Answer 1

Chrome security does not allow access to local files. Chrome安全性不允许访问本地文件。 (ie the .json file) （即.json文件）

Opening chrome from terminal to allow access is one solution. 一种解决方案是从终端打开chrome以允许访问。

"C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" --allow-file-access-from-files

edit path for your location of chrome.exe and then try to open the .html local file. 编辑chrome.exe位置的路径，然后尝试打开.html本地文件。

"Cross origin requests are only supported for HTTP." “仅HTTP支持跨源请求。” error when loading a local file 加载本地文件时出错

Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https 跨源请求仅支持以下协议方案：http，数据，chrome，chrome扩展名，https

http://www.chrome-allow-file-access-from-file.com/windows.html http://www.chrome-allow-file-access-from-file.com/windows.html

How do I use spaces in the Command Prompt? 如何在命令提示符中使用空格？

html d3.js，图像在Firefox中呈现，但不在chrome中呈现

问题描述

1 个解决方案

解决方案1
0 2018-12-03 17:46:57

html d3.js，图像在Firefox中呈现，但不在chrome中呈现

问题描述

1 个解决方案

解决方案1 0 2018-12-03 17:46:57

解决方案1
0 2018-12-03 17:46:57