本文介绍了使用D3.js使用非URL的base64 jpeg图像填充节点圆的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在尝试在html页面上使用D3.js，并在节点圈子中填充base64格式且不是**的.jpeg图像.我找到了很多带有URL的示例，并使用URL制作了一个有效的Network Force Graph，但是我需要能够仅在json文件中传递base64.
I am trying to use D3.js on an html page and fill in the node circles with a .jpeg image that is in base64 format and is ** not a URL **. I have found lots of examples with URLs and have made a working Network Force Graph with URLs but I need to be able to just pass base64 in my json file.
有人可以帮助我吗?谢谢.
Can anyone help me? Thank you.
这是相关的代码段.d.img包含base64文本.
Here is the relevant snippet. d.img contains the base64 text.:
var images = node.append("svg:image")
.attr("xlink:href", "data:image/jpeg;base64," + function(d) { return "data:image/jpeg;base64," + d.img;})
//.attr("xlink:href", function(d) { return "data:image/jpeg;base64," + "data:image/jpeg;base64," + d.img;})
.attr("x", function(d) { return -25;})
.attr("y", function(d) { return -25;})
.attr("height", 50)
.attr("width", 50);
这是完整的javascript文件:
Here is the full javascript file:
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<meta name="description" content="">
<title>8.6 - Node-link diagrams</title>
<!-- Bootstrap Core CSS -->
<link rel="stylesheet" href="css/bootstrap.min.css">
<!-- Custom CSS -->
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<nav class="navbar navbar-default"></nav>
<svg width="600" height="600"></svg>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
var svg = d3.select("svg"),
width = +svg.attr("width"),
height = +svg.attr("height"),
circleRadius = 30,
chargeStrength = -5000; // -50
var color = d3.scaleOrdinal(d3.schemeCategory10);
// Add "forces" to the simulation here
var simulation = d3.forceSimulation()
.force("center", d3.forceCenter(width / 2, height / 2))
.force("charge", d3.forceManyBody().strength(chargeStrength))
.force("collide", d3.forceCollide(circleRadius).strength(0.9))
.force("link", d3.forceLink().id(function(d) { return d.id; }));
// For each id.
d3.json("data/force2.json", function(error, graph) {
if (error) throw error;
console.log(graph);
// Add lines for every link in the dataset
var link = svg.append("g")
.attr("class", "links")
.selectAll("line")
.data(graph.links)
.enter().append("line")
.attr("stroke-width", function(d) { return
Math.sqrt(d.value); });
// Add circles for every node in the dataset
var node = svg.append("g")
.attr("class", "nodes")
.selectAll("circle")
.data(graph.nodes)
.enter()
.append("g")
.attr("class", "node");
var circles = node.append("circle")
.attr("r", circleRadius)
.attr("fill", function(d) { return color(d.group); })
.call(d3.drag()
.on("start", dragstarted)
.on("drag", dragged)
.on("end", dragended)
);
// Add Supervisory Org Label
var text2 = node.append("text")
.style("text-anchor", "middle")
.attr("y", 40)
.text(function(d) {return d.org });
// Add id (name) label
var text = node.append("text")
.style("text-anchor", "middle")
.attr("y", 55)
.text(function(d) {return d.id });
var images = node.append("svg:image")
.attr("xlink:href", "data:image/jpeg;base64," +
function(d) { return "data:image/jpeg;base64," + d.img;})
//.attr("xlink:href", function(d) { return d.img;})
.attr("x", function(d) { return -25;})
.attr("y", function(d) { return -25;})
.attr("height", 50)
.attr("width", 50);
// make the image grow a little on mouse over and add the text
details on click
var setEvents = images
.on( 'mouseenter', function() {
// select element in current context
d3.select( this )
.transition()
.attr("x", function(d) { return -60;})
.attr("y", function(d) { return -60;})
.attr("height", 100)
.attr("width", 100);
})
// set back
.on( 'mouseleave', function() {
d3.select( this )
.transition()
.attr("x", function(d) { return -25;})
.attr("y", function(d) { return -25;})
.attr("height", 50)
.attr("width", 50);
});
// Basic tooltips
node.append("title")
.text(function(d) { return d.id; });
// Attach nodes to the simulation, add listener on the "tick" event
simulation
.nodes(graph.nodes)
.on("tick", ticked);
// Associate the lines with the "link" force
simulation.force("link")
.links(graph.links)
// Dynamically update the position of the nodes/links as time passes
function ticked() {
link
.attr("x1", function(d) { return d.source.x; })
.attr("y1", function(d) { return d.source.y; })
.attr("x2", function(d) { return d.target.x; })
.attr("y2", function(d) { return d.target.y; });
//node
//.attr("cx", function(d) { return d.x; })
// .attr("cy", function(d) { return d.y; });
node.attr("transform", function(d) {
return "translate(" + d.x + "," + d.y + ")";
});
}
var legend = svg.selectAll(".legend")
//.data(color.domain())
.data([1,2])
.enter().append("g")
.attr("class", "legend")
//.attr("transform", function(d, i) { return "translate(0," + i * 20 + ")"; });
legend.append("rect")
.attr("x", width - 100)
.attr("y", height - 90)
.attr("width", 18)
.attr("height", 18)
.style("fill", function(d) { return color(1) });
legend.append("rect")
.attr("x", width - 100)
.attr("y", height - 113)
.attr("width", 18)
.attr("height", 18)
.style("fill", function(d) { return color(2) });
legend.append("text")
.attr("x", width - 78)
.attr("y", height - 80)
.attr("dy", ".35em")
.style("text-anchor", "begin")
.text("MatchUP")
//.text("MatchUPXXXXXXXXXXXXXXXXXXXX");
legend.append("text")
.attr("x", width - 78)
.attr("y", height - 103)
.attr("dy", ".35em")
.style("text-anchor", "begin")
.text("Connection")
});
// Change the value of alpha, so things move around when we drag a node
function dragstarted(d) {
if (!d3.event.active) simulation.alphaTarget(0.7).restart();
d.fx = d.x;
d.fy = d.y;
}
// Fix the position of the node that we are looking at
function dragged(d) {
d.fx = d3.event.x;
d.fy = d3.event.y;
}
// Let the node do what it wants again once we've looked at it
function dragended(d) {
if (!d3.event.active) simulation.alphaTarget(0);
d.fx = null;
d.fy = null;
}
</script>
</body>
推荐答案
函数必须为:
function(d) { return "data:image/jpeg;base64," + d.img; }
否则，您将一个字符串和一个导致字符串的函数连接起来，因此就失去了该函数.
otherwise you concatenate a string and a function which results in a string and you therefore losse the function.
这篇关于使用D3.js使用非URL的base64 jpeg图像填充节点圆的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！