D3 条形图示例在本地不工作
Posted
技术标签:
【中文标题】D3 条形图示例在本地不工作【英文标题】：D3 Bar Graph example not working locally 【发布时间】：2013-09-29 03:05:54 【问题描述】：我对 D3 非常陌生，想看看一个示例如何在本地工作。我将条形图代码复制并粘贴到名为 index.html 的本地文件中，并且还复制了 data.tsv。出于某种原因，当我在浏览器上打开文件时，绝对没有任何显示！我尝试将脚本 src 更改为“d3/d3.v3.min.js”，因为那是我下载的 d3 所在的文件夹。但是，这也不起作用。对于我尝试过的每个示例，我还没有成功查看 D3 示例。帮助将不胜感激！
index.html代码如下：
<meta charset="utf-8">
<style>
body
font: 10px sans-serif;
.axis path,
.axis line
fill: none;
stroke: #000;
shape-rendering: crispEdges;
.bar
fill: steelblue;
.x.axis path
display: none;
</style>
<body>
<script src="d3/d3.v3.min.js"></script>
<script>
var margin = top: 20, right: 20, bottom: 30, left: 40,
width = 960 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom;
var formatPercent = d3.format(".0%");
var x = d3.scale.ordinal()
.rangeRoundBands([0, width], .1);
var y = d3.scale.linear()
.range([height, 0]);
var xAxis = d3.svg.axis()
.scale(x)
.orient("bottom");
var yAxis = d3.svg.axis()
.scale(y)
.orient("left")
.tickFormat(formatPercent);
var svg = d3.select("body").append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
d3.tsv("data.tsv", type, function(error, data)
x.domain(data.map(function(d) return d.letter; ));
y.domain([0, d3.max(data, function(d) return d.frequency; )]);
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis);
svg.append("g")
.attr("class", "y axis")
.call(yAxis)
.append("text")
.attr("transform", "rotate(-90)")
.attr("y", 6)
.attr("dy", ".71em")
.style("text-anchor", "end")
.text("Frequency");
svg.selectAll(".bar")
.data(data)
.enter().append("rect")
.attr("class", "bar")
.attr("x", function(d) return x(d.letter); )
.attr("width", x.rangeBand())
.attr("y", function(d) return y(d.frequency); )
.attr("height", function(d) return height - y(d.frequency); );
);
function type(d)
d.frequency = +d.frequency;
return d;
</script>
data.tsv 格式如下： 字母频率 .08167 B .01492 C .02780 D .04253 E .12702 F .02288 G .02022 H .06094 我.06973
【问题讨论】：
你看过控制台吗？如果你看过，它会说什么？ 【参考方案1】：d3.tsv 方法发出 AJAX 数据请求。在大多数浏览器上，由于Same Origin Policy 通常禁止对file:/// urls 的AJAX 请求，这在本地不起作用。
要获得一个使用本地运行的 AJAX 的示例，您需要一个本地网络服务器。如果你有 Python，运行
> python -m SimpleHTTPServer
从您的文件所在目录中的命令行执行此操作。
如果你使用 python 3
> python -m http.server 9000
如果您更喜欢 node.js，请尝试http-server。
【讨论】：
感谢您的信息。我是否必须为 csv 数据文件做同样的事情？ 是的。d3.csv 和 d3.json 也在发出 AJAX 请求，因此适用相同的规则。您可以使用本地网络服务器，也可以内联它 - 这些基本上是唯一的选择。
另外，来自here，如果您来自未来并使用 Python 3，请使用 python -m http.server。
按照@PrashantKumar 的建议运行python 服务器后，您需要打开您的html 文件，如http://127.0.0.1:8000/index.html。直接从本地磁盘打开html文件是不行的。
所以，当我运行 ng serve 时，它不会使用与我运行 http-server 相同的端口。我收到错误消息“无法加载 127.0.0.1:8080/master_grades_lecture.csv：请求的资源上不存在 'Access-Control-Allow-Origin' 标头。因此，不允许访问 Origin 'localhost:4200'。”有什么建议吗？【参考方案2】：
作为替代方案，Lars Kotthoff 本人在尝试使用 .tsv/.csv 文件时建议我，您可以为此直接工作：
http://plnkr.co/
这使您可以使用所有喜欢的 .json / .tsv / .csv 文件，并与他人共享以进行协作。你可以匿名也可以不匿名，重要的是你不会丢失你的 plunker 生成的 HTTP 地址。
需要注意的一点：您不能像在 FTP 服务器上那样直接上传文件，而是应该：
-
点击“新建文件”
输入 .csv / .tsv / .json 的名称
代码中引用的文件（包括扩展名）
复制
并按原样粘贴此文件中包含的代码。
别忘了
如果需要，更新您的 .css / .js 的名称，以便匹配
你的 index.html
【讨论】：
【参考方案3】：如前所述，您很可能会在 d3 库中遇到用于解析 JSON 数据的外部资源的 XHR 问题。
但是，这里有另一种解决方案：结合使用 JSONP 和 Express/Node.js 以及 jQuery 函数来发起对 JSON 的客户端请求，而不是使用 d3 函数的原始包装器。
必须删除原始 d3.json 包装器并使用来自请求的数据填充邻接图。首先克隆或下载jsonp-d3-experiment 并使用node server.js 启动服务器。当然，您需要全局安装 Node.js，从 Node Packaged Modules (npm) 开始。将您的程序复制到子目录中。
将您的 JSON 数据放入 jsonp-d3-experiment 目录并修改 server.js 以将请求路由到您的数据：
// Return data from callback
server.get('/example', function(req, res)
// Read the JSON data and send to JSONP response
readJSON('example.json', function (e, json)
if (e) throw e;
res.jsonp(json);
);
);
下面是我为共现矩阵修改的代码。我将整个脚本移动到$.getJSON 并完全删除了d3.json 函数。
<script>
$.getJSON("http://localhost:8080/example?callback=?", function(result)
miserables = result;
var margin =
top: 80,
right: 0,
bottom: 10,
left: 80
,
width = 720,
height = 720;
var x = d3.scale.ordinal().rangeBands([0, width]),
z = d3.scale.linear().domain([0, 4]).clamp(true),
c = d3.scale.category10().domain(d3.range(10));
var svg = d3.select("body").append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.style("margin-left", -margin.left + "px")
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
var matrix = [],
nodes = miserables.nodes,
n = nodes.length;
// Compute index per node.
nodes.forEach(function(node, i)
node.index = i;
node.count = 0;
matrix[i] = d3.range(n).map(function(j)
return
x: j,
y: i,
z: 0
;
);
);
// Convert links to matrix; count character occurrences.
miserables.links.forEach(function(link)
matrix[link.source][link.target].z += link.value;
matrix[link.target][link.source].z += link.value;
matrix[link.source][link.source].z += link.value;
matrix[link.target][link.target].z += link.value;
nodes[link.source].count += link.value;
nodes[link.target].count += link.value;
);
// Precompute the orders.
var orders =
name: d3.range(n).sort(function(a, b)
return d3.ascending(nodes[a].name, nodes[b].name);
),
count: d3.range(n).sort(function(a, b)
return nodes[b].count - nodes[a].count;
),
group: d3.range(n).sort(function(a, b)
return nodes[b].group - nodes[a].group;
)
;
// The default sort order.
x.domain(orders.name);
svg.append("rect")
.attr("class", "background")
.attr("width", width)
.attr("height", height);
var row = svg.selectAll(".row")
.data(matrix)
.enter().append("g")
.attr("class", "row")
.attr("transform", function(d, i)
return "translate(0," + x(i) + ")";
)
.each(row);
row.append("line")
.attr("x2", width);
row.append("text")
.attr("x", -6)
.attr("y", x.rangeBand() / 2)
.attr("dy", ".32em")
.attr("text-anchor", "end")
.text(function(d, i)
return nodes[i].name;
);
var column = svg.selectAll(".column")
.data(matrix)
.enter().append("g")
.attr("class", "column")
.attr("transform", function(d, i)
return "translate(" + x(i) + ")rotate(-90)";
);
column.append("line")
.attr("x1", -width);
column.append("text")
.attr("x", 6)
.attr("y", x.rangeBand() / 2)
.attr("dy", ".32em")
.attr("text-anchor", "start")
.text(function(d, i)
return nodes[i].name;
);
function row(row)
var cell = d3.select(this).selectAll(".cell")
.data(row.filter(function(d)
return d.z;
))
.enter().append("rect")
.attr("class", "cell")
.attr("x", function(d)
return x(d.x);
)
.attr("width", x.rangeBand())
.attr("height", x.rangeBand())
.style("fill-opacity", function(d)
return z(d.z);
)
.style("fill", function(d)
return nodes[d.x].group == nodes[d.y].group ? c(nodes[d.x].group) : null;
)
.on("mouseover", mouseover)
.on("mouseout", mouseout);
function mouseover(p)
d3.selectAll(".row text").classed("active", function(d, i)
return i == p.y;
);
d3.selectAll(".column text").classed("active", function(d, i)
return i == p.x;
);
function mouseout()
d3.selectAll("text").classed("active", false);
d3.select("#order").on("change", function()
clearTimeout(timeout);
order(this.value);
);
function order(value)
x.domain(orders[value]);
var t = svg.transition().duration(2500);
t.selectAll(".row")
.delay(function(d, i)
return x(i) * 4;
)
.attr("transform", function(d, i)
return "translate(0," + x(i) + ")";
)
.selectAll(".cell")
.delay(function(d)
return x(d.x) * 4;
)
.attr("x", function(d)
return x(d.x);
);
t.selectAll(".column")
.delay(function(d, i)
return x(i) * 4;
)
.attr("transform", function(d, i)
return "translate(" + x(i) + ")rotate(-90)";
);
var timeout = setTimeout(function()
order("group");
d3.select("#order").property("selectedIndex", 2).node().focus();
, 5000);
);
</script>
请注意，现在 JSON 数据位于 result 中，因此最简单的方法是将其分配给 miserables。
注意：此解决方案需要 jQuery。
现在您应该能够在本地打开和渲染所有 d3 可视化，而无需将它们托管在服务器上——只需直接从本地文件系统在浏览器中打开它们。
HTH！
【讨论】：
以上是关于D3 条形图示例在本地不工作的主要内容，如果未能解决你的问题，请参考以下文章