本文介绍了使用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图像填充节点圆的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

10-30 08:05