Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

It is possible to add image or any SVG html element instead of shape

See original GitHub issue

This is what i tried to make node as a image. but result is not clear.

this below example requires * node.intersect* i.e any one shape but can i append my custom html element instead of shape

render.shapes().house = function(parent, bbox, node) {
    var w = bbox.width,
        h = bbox.height,
        points = [
            { x: 0, y: 0 },
            { x: w, y: 0 },
            { x: w, y: -h },
            { x: w / 2, y: -h * 3 / 2 },
            { x: 0, y: -h }
        ];
    var shapeSvg = parent.append("image")
        .attr("class", "nodeImage")
        .attr("xlink:href", function(d) {
            var test = that.g.node(d);
            if (test.typeName == "Table") {
                return '../img/icon-table.png'
            } else {
                return '../img/icon-gear.png'
            }
        })
        .attr("x", "-18px")
        .attr("y", "-18px")
        .attr("width", "34px")
        .attr("height", "34px");
    /* var shapeSvg = parent.insert("polygon", ":first-child")
         .attr("points", points.map(function(d) {
             return d.x + "," + d.y;
         }).join(" "))
         .attr("transform", "translate(" + (-w / 2) + "," + (h * 3 / 4) + ")");*/

    node.intersect = function(point) {
        return dagreD3.intersect.polygon(node, points, point);
    };

    return shapeSvg;
};

Issue Analytics

State:
Created 7 years ago
Comments:7

Top GitHub Comments

4reactions

kevalbhattcommented, May 16, 2016

@OrenHasbani I have one hack may be it will help you guys.

var render = new dagreD3.render();
 render.shapes().img = function circle(parent, bbox, node) {
     //var r = Math.max(bbox.width, bbox.height) / 2,
     var shapeSvg = parent.insert("image")
         .attr("class", "nodeImage")
         .attr("xlink:href", function(d) {
             if (node) {
                 if (node.typeName) {
                     if (node.id == that.guid) {
                         return '../img/icon-table-active.png';
                     } else {
                         return '../img/icon-table.png';
                     }
                 } else {
                     if (node.id == that.guid) {
                         return '../img/icon-gear-active.png';
                     } else {
                         return '../img/icon-gear.png';
                     }
                 }
             }
         }).attr("x", "-20px")
         .attr("y", "-20px")
         .attr("width", "40px")
         .attr("height", "40px");

     //Dont append circle only append image. 

     /*shapeSvg = parent.insert("circle", ":first-child")
         .attr("x", 35)
         .attr("y", 35)
         .attr("r", 20);*/
     node.intersect = function(point) {
         //return dagreD3.intersect.circle(node, points, point);
         return dagreD3.intersect.circle(node, 20, point);
     };
     return shapeSvg;
 };

0reactions

git-ashishcommented, May 11, 2016

You can use the SVG image as a background-image property of the html div.