Javascript Sankey图节点计数d3 js
我正在编写这段代码，但有一些问题我无法找到，问题是我无法按照我的意愿获得它们：Javascript Sankey图节点计数d3 js,javascript,html,d3.js,sankey-diagram,Javascript,Html,D3.js,Sankey Diagram,我正在编写这段代码，但有一些问题我无法找到，问题是我无法按照我的意愿获得它们： <!DOCTYPE html> <meta charset="utf-8"> <title>Sankey</title> <style> .node rect { cursor: move; fill-opacity: .9; shape-rendering: crispEdges; } .node text { pointer-events:
<!DOCTYPE html>
<meta charset="utf-8">
<title>Sankey</title>
<style>
.node rect {
cursor: move;
fill-opacity: .9;
shape-rendering: crispEdges;
}
.node text {
pointer-events: none;
text-shadow: 0 1px 0 #fff;
}
.link {
fill: none;
stroke: #000;
stroke-opacity: .2;
}
.link:hover {
stroke-opacity: .5;
}
</style>
<body>
<p id="chart">
<script src="http://d3js.org/d3.v3.js"></script>
<script type="text/javascript" src="http://underscorejs.org/underscore-min.js"> </script>
<script src="sankey.js"></script>
<script>
var margin = {top: 50, right: 80, bottom: 30, left: 30},
width = 1800- margin.left - margin.right,
height = 480 - margin.top - margin.bottom;
var formatNumber = d3.format(",.0f"),
format = function(d) { return formatNumber(d) ; },
color = d3.scale.category20();
var svg = d3.select("#chart").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 + ")");
var sankey = d3.sankey()
.nodeWidth(35) //changes width of node
.nodePadding(10)
.size([width, height]);
function loadCSV(file) {
var request;
if (window.XMLHttpRequest) {
request = new XMLHttpRequest();
} else {
request = new ActiveXObject('Microsoft.XMLHTTP');
}
// load
request.open('GET', file, false);
request.send();
parseCSV(request.responseText);
return file=request.responseText;
}
function parseCSV(data){
//alert(data);
}
var ccs=loadCSV("sankey.csv");
console.log(ccs);
var json = ccs.split('\n').reduce(function(result, line, index) {
if (index > 0) { // Skip header.
var data = line.split(',');
console.log (data);
if (data.length === 5) { // Skip rows with incomplete columns.
var containsSourceNode = result.nodes.some(function(node) { return node.name === data[0]; });
if (!containsSourceNode) {
result.nodes.push({
node : result.nodes.length,
name : data[0],
xPos : data[1]
});
}
var containsTargetNode = result.nodes.some(function(node) { return node.name === data[2]; });
if (!containsTargetNode) {
result.nodes.push({
node : result.nodes.length,
name : data[2],
xPos : data[3]
});
}
result.links.push({
source : result.nodes.filter(function(node) { return node.name === data[0]; })[0].node,
target : result.nodes.filter(function(node) { return node.name === data[2]; })[0].node,
value : data[4[![\]
][1]][1]});
}
}
console.log(result);
return result;
}, {
nodes : [],
links : []
});
var path = sankey.link();
var renderSankey = function(d) {
window.width = 280; //determines the width of the dra
sankey
.nodes(d.nodes)
.links(d.links)
.layout(32);
var link = svg.append("g").selectAll(".link")
.data(d.links)
.enter().append("path")
.attr("class", "link")
.attr("d", path)
.style("stroke-width", function(d) { return Math.max(1, d.dy); })
.sort(function(a, b) { return b.dy - a.dy; });
link.append("title")
.text(function(d) { return d.source.name + " → " + d.target.name + "\n" + format(d.value); });
var node = svg.append("g").selectAll(".node")
.data(d.nodes)
.enter().append("g")
.attr("class", "node")
.attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; })
.call(d3.behavior.drag()
.origin(function(d) { return d; })
.on("dragstart", function() { this.parentNode.appendChild(this); })
.on("drag", dragmove));
console.log(node);
node.append("rect")
.attr("height", function(d) { return d.dy; })
.attr("width", sankey.nodeWidth())
.style("fill", function(d) { return d.color = color(d.name.replace(/ .*/, "")); })
.style("stroke", function(d) { return d3.rgb(d.color).darker(2); })
.append("title")
.text(function(d) { return d.name + "\n" + format(d.value); });
node.append("text")
.attr("x", -6)
.attr("y", function(d) { return d.dy / 2; })
.attr("dy", ".35em")
.attr("text-anchor", "end")
.attr("transform", null)
.text(function(d) { return d.name; })
.filter(function(d) { return d.x < width / 2; })
.attr("x", 6 + sankey.nodeWidth())
.attr("text-anchor", "start");
function dragmove(d) {
d3.select(this).attr("transform",
"translate(" + (
d.x = Math.max(0, Math.min(width - d.dx, d3.event.x))
) + "," + (
d.y = Math.max(0, Math.min(height - d.dy, d3.event.y))
) + ")");
sankey.relayout();
link.attr("d", path);
}
var extractX = function(d){ return d['x']};
function numOrdA(a, b){ return (a-b); }
var locX = d['nodes'].map(extractX).sort(numOrdA);
var PosX = _.uniq(locX);
console.log(PosX);
var extractY = function(d){ return d['y']};
var locY = d['nodes'].map(extractY).sort(numOrdA);
var PosY = _.max(locY);
svg.append("text")
.style("fill", "#225ea8")
.style("font-weight",400)
.style("font-family","Helvetica Neue")
.attr("x", PosX[0])
.attr("y", 420)
.text("test1");
svg.append("text")
.style("fill", "#225ea8")
.style("font-weight",400)
.style("font-family","Helvetica Neue")
.attr("x", PosX[1] )
.attr("y", 420)
.text("test2");
console.log(PosX[1]);
svg.append("text")
.style("fill", "#225ea8")
.style("font-weight",400)
.style("font-family","Helvetica Neue")
.attr("x", PosX[2])
.attr("y", 420)
.text("test3");
svg.append("text")
.style("fill", "#225ea8")
.style("font-weight",400)
.style("font-family","Helvetica Neue")
.attr("x", PosX[3])
.attr("y", 420)
.text("test4");
svg.append("text")
.style("fill", "#225ea8")
.style("font-weight",400)
.style("font-family","Helvetica Neue")
.attr("x", PosX[4])
.attr("y", 420)
.text("test5");
}
renderSankey(json);
</script>
</body>
</html>
可视化不起作用，可能有一些代码错误我找不到。Hey Chis如果您在当前结果中包含预期行为的示例，这将非常有用。你粘贴了很多代码，但是因为你甚至不知道你会遇到什么错误，所以其他人很难帮助你。在可视化方面，我是说HTML页面数据看起来不像它应该的样子，节点的位置不正确。@nickOK hm-但这对我来说并不意味着什么。当然，您的代码有问题，但是如果没有一个示例，我就看不出来，我不会花30分钟的时间尝试使用上面粘贴的代码复制您的结果。如果有人愿意这样做，那你就很幸运了！但是，10次中有9次，如果你不能缩小问题的范围，不能提供你尝试过的和没有成功的例子，你将得不到任何帮助：）
source,xPos,target,xPos,value
user1,0,user2,1,4
user2,1,user3,2,4
user1,0,user3,2,2
user1,0,user4,2,2
user6,1,user8,2,2
user_123,3,User1_1,4,2
user12_2,4,user1122,5,3
userab1,2,user122m,5,4
user12_2,4,user122m,5,2
user1,0,user555,5,2
user2,1,User1_1,4,2
userabc,4