D3 js链接图像节点之间的长度

时间：2017-07-31 05:37:22

标签： javascript d3.js svg

有以下图表： enter image description here

当节点I上的mouseover仅显示它的相邻节点而所有其他节点的不透明度为0.2（透明度）时 - 这样可以正常工作。 问题是现在出现了其他节点之间的链接（不透明度为0.2）并且它看起来很糟糕，因为它将图像覆盖到它的中心。如何将这些链接缩小到图像/圆形边缘？

var gSharedActivityGraphNodes = [{
    "id": 0,
    "image": "1285700-410.png",
    "height": 40,
    "width": 40,
    "adjacents": [1, 2, 3],
    "data": {
        "name": "Product1",
        "groupId": "Bla1",
        "desc": "Desc1",
        "leaderId": "123-123"
    }
}, {
    "id": 1,
    "image": "1228539-009.png",
    "height": 100,
    "width": 100,
    "adjacents": [0],
    "data": {
        "name": "Product1",
        "groupId": "Bla2",
        "desc": "Desc1",
        "leaderId": "123-123"
    }
}, {
    "id": 2,
    "image": "1277422-001.png",
    "height": 50,
    "width": 50,
    "adjacents": [0],
    "data": {
        "name": "Product1",
        "groupId": "Bla3",
        "desc": "Desc1",
        "leaderId": "123-123"
    }
}, {
    "id": 3,
    "image": "1272178-540.png",
    "height": 40,
    "width": 40,
    "adjacents": [0],
    "data": {
        "name": "Product1",
        "groupId": "Bla4",
        "desc": "Desc1",
        "leaderId": "123-123"
    }
}];

var gSharedActivityGraphNodesMap = {};

var gSharedActivityGraphEdges = [{
    "source": 0,
    "target": 1,
    "width": 5
}, {
    "source": 0,
    "target": 2,
    "width": 10
}, {
    "source": 0,
    "target": 3,
    "width": 1
}];

var width = 1300;
var height = 500;

var svg = d3.select("#sharedActivityGraph")
    .append("svg")
    .attr("width", width)
    .attr("height", height);

 var simulation = d3.forceSimulation()
    .force("link", d3.forceLink())
    .force("charge", d3.forceManyBody().strength(-2000))
    .force("center", d3.forceCenter(width / 2, height / 2));


var links = svg.selectAll("foo")
    .data(gSharedActivityGraphEdges)
    .enter()
    .append("line")
    .style("stroke", "#ccc")
    .style("stroke-width", function (e) { return e.width });

var color = d3.scaleOrdinal(d3.schemeCategory20);

var node = svg.selectAll("foo")
    .data(gSharedActivityGraphNodes)
    .enter()
    .append("g")
    .call(d3.drag()
        .on("start", dragstarted)
        .on("drag", dragged)
        .on("end", dragended));

node.on('mouseover', function (d) {
       console.log(d);
       SharedActivityShowInfo(d);

       node.filter(function (d1) { return (d !== d1
       && d1.adjacents.indexOf(d.id) == -1);
       }).style("opacity", 0.2);
       node.filter(function (d1) { return (d == d1
       || d1.adjacents.indexOf(d.id) !== -1);
       }).style("opacity", 1);
    })
    .on('mouseout', function () {
       SharedActivityHideInfo();
        node.style("opacity", 1);
    });

var nodeCircle = node.append("circle")
    .attr("r", function (d) { return 0.5 * Math.max(d.width, d.height) })
    .attr("stroke", "gray")
    .attr("stroke-width", "2px")
    .attr("fill", "white");

var nodeImage = node.append("image")
        .attr("xlink:href", function (d) { return d.image })
        .attr("height", function (d) { return d.height + "" })
        .attr("width", function (d) { return d.width + "" })
        .attr("x", function (d) {return -0.5 * d.width })
        .attr("y", function (d) {return -0.5 * d.height })
        .attr("clip-path", function (d) { return "circle(" + (0.48 * Math.max(d.width, d.height)) + "px)"});

simulation.nodes(gSharedActivityGraphNodes);
simulation
    .force("link")
    .links(gSharedActivityGraphEdges);

simulation.on("tick", function() {
    links.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("transform", function (d) { return "translate(" + d.x + "," + d.y + ")"});
});

function dragstarted(d) {
    if (!d3.event.active) simulation.alphaTarget(0.3).restart();
    d.fx = d.x;
    d.fy = d.y;
}

function dragged(d) {
    d.fx = d3.event.x;
    d.fy = d3.event.y;
}

function dragended(d) {
    if (!d3.event.active) simulation.alphaTarget(0);
    d.fx = null;
    d.fy = null;
}

1 个答案:

答案 0 :(得分：1)

我即将发布一个答案，显示如何重新计算x行和y行。但是，既然你说in the comments只是改变图像的不透明度（不改变圆圈的不透明度）适合你，这就是你需要的：

node.on('mouseover', function(d) {
    node.filter(function(d1) {
      return (d !== d1 && d1.adjacents.indexOf(d.id) == -1);
    }).select("image").style("opacity", 0.2);
    node.filter(function(d1) {
      return (d == d1 || d1.adjacents.indexOf(d.id) !== -1);
    }).select("image").style("opacity", 1);
  })
  .on('mouseout', function() {
    node.select("image").style("opacity", 1);
  });

这是您更新的代码：

var gSharedActivityGraphNodes = [{
  "id": 0,
  "image": "https://www.guidedogsvictoria.com.au/wp-content/uploads/2016/09/guide-dog-710x570.jpg",
  "height": 40,
  "width": 40,
  "adjacents": [1, 2, 3],
  "data": {
    "name": "Product1",
    "groupId": "Bla1",
    "desc": "Desc1",
    "leaderId": "123-123"
  }
}, {
  "id": 1,
  "image": "https://www.guidedogsvictoria.com.au/wp-content/uploads/2016/09/guide-dog-710x570.jpg",
  "height": 100,
  "width": 100,
  "adjacents": [0],
  "data": {
    "name": "Product1",
    "groupId": "Bla2",
    "desc": "Desc1",
    "leaderId": "123-123"
  }
}, {
  "id": 2,
  "image": "https://www.guidedogsvictoria.com.au/wp-content/uploads/2016/09/guide-dog-710x570.jpg",
  "height": 50,
  "width": 50,
  "adjacents": [0],
  "data": {
    "name": "Product1",
    "groupId": "Bla3",
    "desc": "Desc1",
    "leaderId": "123-123"
  }
}, {
  "id": 3,
  "image": "https://www.guidedogsvictoria.com.au/wp-content/uploads/2016/09/guide-dog-710x570.jpg",
  "height": 40,
  "width": 40,
  "adjacents": [0],
  "data": {
    "name": "Product1",
    "groupId": "Bla4",
    "desc": "Desc1",
    "leaderId": "123-123"
  }
}];

var gSharedActivityGraphNodesMap = {};

var gSharedActivityGraphEdges = [{
  "source": 0,
  "target": 1,
  "width": 5
}, {
  "source": 0,
  "target": 2,
  "width": 10
}, {
  "source": 0,
  "target": 3,
  "width": 1
}];

var width = 500;
var height = 300;

var svg = d3.select("body")
  .append("svg")
  .attr("width", width)
  .attr("height", height);

var simulation = d3.forceSimulation()
  .force("link", d3.forceLink())
  .force("charge", d3.forceManyBody().strength(-2000))
  .force("center", d3.forceCenter(width / 2, height / 2));


var links = svg.selectAll("foo")
  .data(gSharedActivityGraphEdges)
  .enter()
  .append("line")
  .style("stroke", "#ccc")
  .style("stroke-width", function(e) {
    return e.width
  });

var color = d3.scaleOrdinal(d3.schemeCategory20);

var node = svg.selectAll("foo")
  .data(gSharedActivityGraphNodes)
  .enter()
  .append("g")
  .call(d3.drag()
    .on("start", dragstarted)
    .on("drag", dragged)
    .on("end", dragended));

node.on('mouseover', function(d) {
    node.filter(function(d1) {
      return (d !== d1 && d1.adjacents.indexOf(d.id) == -1);
    }).select("image").style("opacity", 0.2);
    node.filter(function(d1) {
      return (d == d1 || d1.adjacents.indexOf(d.id) !== -1);
    }).select("image").style("opacity", 1);
  })
  .on('mouseout', function() {
    node.select("image").style("opacity", 1);
  });

var nodeCircle = node.append("circle")
  .attr("r", function(d) {
    return 0.5 * Math.max(d.width, d.height)
  })
  .attr("stroke", "gray")
  .attr("stroke-width", "2px")
  .attr("fill", "white");

var nodeImage = node.append("image")
  .attr("xlink:href", function(d) {
    return d.image
  })
  .attr("height", function(d) {
    return d.height + ""
  })
  .attr("width", function(d) {
    return d.width + ""
  })
  .attr("x", function(d) {
    return -0.5 * d.width
  })
  .attr("y", function(d) {
    return -0.5 * d.height
  })
  .attr("clip-path", function(d) {
    return "circle(" + (0.48 * Math.max(d.width, d.height)) + "px)"
  });

simulation.nodes(gSharedActivityGraphNodes);
simulation
  .force("link")
  .links(gSharedActivityGraphEdges);

simulation.on("tick", function() {
  links.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("transform", function(d) {
    return "translate(" + d.x + "," + d.y + ")"
  });
});

function dragstarted(d) {
  if (!d3.event.active) simulation.alphaTarget(0.3).restart();
  d.fx = d.x;
  d.fy = d.y;
}

function dragged(d) {
  d.fx = d3.event.x;
  d.fy = d3.event.y;
}

function dragended(d) {
  if (!d3.event.active) simulation.alphaTarget(0);
  d.fx = null;
  d.fy = null;
}
<script src="https://d3js.org/d3.v4.min.js"></script>

相关问题
最新问题