javascript - D3 : combine circles and images-6ren

javascript - D3 : combine circles and images

转载作者：行者123 更新时间：2023-11-30 11:46:15

我有生成圆圈和图片的功能

        node.append("circle")
        .attr("r", function(d) { return d.weight * 2+ 12; })
        .attr("class", "logo")
        .style("fill", "transparent")       
        .style("stroke", "black")     
        .style("stroke-width", 0.25)
         .on("mouseover", function(){ 
           d3.select(this)
               .style("fill", "url(#/images/fake/FakeTree/100331934)");
             })
              .on("mouseout", function(){ 
                   d3.select(this)
                       .style("fill", "transparent");
             });


        node.append("image")
            .attr("xlink:href", d=> d.url)

                .classed("MakeItround", true)

            .attr("x", function(d) { return d.weight * 2-35; })
            .attr("y", height/15 -38)

            .attr("width", width/20)
            .attr("height", height/20)

             .on("click", function(d) { alert("CLicked"); });

如何使用图案将它们放在一起以制作带圆圈的图像？

JSfiddle:http://jsfiddle.net/qvco2Ljy/124/

最佳答案

您可以按照 Brad 的建议使用 clip-path 属性来实现这一点。

node.append("circle")
  .attr("r", function(d) {
    d.radius = d.weight * 2 + 12;
    return d.radius;
  })
  .attr("class", "logo")  
  .style("fill", "transparent")
  .style("stroke", "black")
  .style("stroke-width", 0.25)
  .on("mouseover", function() {
    d3.select(this)
      .style("fill", "url(#/images/fake/FakeTree/100331934)");
  })
  .on("mouseout", function() {
    d3.select(this)
      .style("fill", "transparent");
  });

node.append("clipPath")
  .attr('id', function(d, i) {
    return "clip" + i
  })
  .append("circle")
  .attr("class", "clip-path")
  .attr("r", function(d) {
    return d.radius;
  })
  .style("fill", function(d) {
    return color(1 / d.rating);
  });

node.append("svg:image")
  .attr("class", "circle")
  .attr("xlink:href", d => d.url)
  .attr("clip-path", function(d, i) {
    return "url(#clip" + i + ")"
  })
  .attr("x", function(d) {
    return -d.radius;
  })
  .attr("y", function(d) {
    return -d.radius;
  })
  .attr("width", function(d) {
    return d.radius * 2;
  })
  .attr("height", function(d) {
    return d.radius * 2;
  });

var graph = {
  "nodes": [{
      "name": "1",
      "rating": 90,
      "id": 2951,
      "url": "http://a4.mzstatic.com/us/r30/Purple71/v4/67/24/35/672435a3-3f19-4a13-21e6-057a8e5a3ca7/icon175x175.pngo"
    }, {
      "name": "2",
      "rating": 80,
      "id": 654654,
      "url": "http://a4.mzstatic.com/us/r30/Purple71/v4/67/24/35/672435a3-3f19-4a13-21e6-057a8e5a3ca7/icon175x175.png"
    }, {
      "name": "3",
      "rating": 80,
      "id": 6546544,
      "url": "http://a4.mzstatic.com/us/r30/Purple71/v4/67/24/35/672435a3-3f19-4a13-21e6-057a8e5a3ca7/icon175x175.pngo"
    }, {
      "name": "4",
      "rating": 1,
      "id": 68987978,
      "url": "http://a4.mzstatic.com/us/r30/Purple71/v4/67/24/35/672435a3-3f19-4a13-21e6-057a8e5a3ca7/icon175x175.png"
    }, {
      "name": "5",
      "rating": 1,
      "id": 9878933,
      "url": "http://a4.mzstatic.com/us/r30/Purple71/v4/67/24/35/672435a3-3f19-4a13-21e6-057a8e5a3ca7/icon175x175.png"
    }, {
      "name": "6",
      "rating": 1,
      "id": 6161,
      "url": "http://a4.mzstatic.com/us/r30/Purple71/v4/67/24/35/672435a3-3f19-4a13-21e6-057a8e5a3ca7/icon175x175.png"
    }, {
      "name": "7",
      "rating": 1,
      "id": 64654,
      "url": "http://a4.mzstatic.com/us/r30/Purple71/v4/67/24/35/672435a3-3f19-4a13-21e6-057a8e5a3ca7/icon175x175.png"
    }, {
      "name": "8",
      "rating": 20,
      "id": 354654,
      "url": "http://a4.mzstatic.com/us/r30/Purple71/v4/67/24/35/672435a3-3f19-4a13-21e6-057a8e5a3ca7/icon175x175.png"
    }, {
      "name": "9",
      "rating": 50,
      "id": 8494,
      "url": "http://a4.mzstatic.com/us/r30/Purple71/v4/67/24/35/672435a3-3f19-4a13-21e6-057a8e5a3ca7/icon175x175.png"
    }, {
      "name": "10",
      "rating": 1,
      "id": 6846874,
      "url": "http://a4.mzstatic.com/us/r30/Purple71/v4/67/24/35/672435a3-3f19-4a13-21e6-057a8e5a3ca7/icon175x175.png"
    }, {
      "name": "11",
      "rating": 1,
      "id": 5487,
      "url": "http://a4.mzstatic.com/us/r30/Purple71/v4/67/24/35/672435a3-3f19-4a13-21e6-057a8e5a3ca7/icon175x175.png"
    }, {
      "name": "12",
      "rating": 80,
      "id": "parfum_kenzo",
      "url": "http://a4.mzstatic.com/us/r30/Purple71/v4/67/24/35/672435a3-3f19-4a13-21e6-057a8e5a3ca7/icon175x175.png"
    }, {
      "name": "13",
      "rating": 1,
      "id": 65465465,
      "url": "http://a4.mzstatic.com/us/r30/Purple71/v4/67/24/35/672435a3-3f19-4a13-21e6-057a8e5a3ca7/icon175x175.png"
    }, {
      "name": "14",
      "rating": 90,
      "id": "jungle_de_kenzo",
      "url": "http://a4.mzstatic.com/us/r30/Purple71/v4/67/24/35/672435a3-3f19-4a13-21e6-057a8e5a3ca7/icon175x175.png"
    }, {
      "name": "15",
      "rating": 20,
      "id": 313514,
      "url": "http://a4.mzstatic.com/us/r30/Purple71/v4/67/24/35/672435a3-3f19-4a13-21e6-057a8e5a3ca7/icon175x175.png"
    }, {
      "name": "16",
      "rating": 40,
      "id": 36543614,
      "url": "http://a4.mzstatic.com/us/r30/Purple71/v4/67/24/35/672435a3-3f19-4a13-21e6-057a8e5a3ca7/icon175x175.png"
    }, {
      "name": "17",
      "rating": 100,
      "id": "Yann_YA645",
      "url": "http://a4.mzstatic.com/us/r30/Purple71/v4/67/24/35/672435a3-3f19-4a13-21e6-057a8e5a3ca7/icon175x175.png"
    }, {
      "name": "18",
      "rating": 1,
      "id": 97413,
      "url": "http://a4.mzstatic.com/us/r30/Purple71/v4/67/24/35/672435a3-3f19-4a13-21e6-057a8e5a3ca7/icon175x175.png"
    }, {
      "name": "19",
      "rating": 1,
      "id": 97414,
      "url": "http://a4.mzstatic.com/us/r30/Purple71/v4/67/24/35/672435a3-3f19-4a13-21e6-057a8e5a3ca7/icon175x175.pngg"
    },



  ],
  "links": [{
      "source": 6,
      "target": 5,
      "value": 6,
      "label": "publishedOn"
    }, {
      "source": 8,
      "target": 5,
      "value": 6,
      "label": "publishedOn"
    }, {
      "source": 7,
      "target": 1,
      "value": 4,
      "label": "containsKeyword"
    }, {
      "source": 8,
      "target": 10,
      "value": 3,
      "label": "containsKeyword"
    }, {
      "source": 7,
      "target": 14,
      "value": 4,
      "label": "publishedBy"
    }, {
      "source": 8,
      "target": 15,
      "value": 6,
      "label": "publishedBy"
    }, {
      "source": 9,
      "target": 1,
      "value": 6,
      "label": "depicts"
    }, {
      "source": 10,
      "target": 1,
      "value": 6,
      "label": "depicts"
    }, {
      "source": 16,
      "target": 1,
      "value": 6,
      "label": "manageWebsite"
    }, {
      "source": 16,
      "target": 2,
      "value": 5,
      "label": "manageWebsite"
    }, {
      "source": 16,
      "target": 3,
      "value": 6,
      "label": "manageWebsite"
    },


  ]
}

//seting size and position
var margin = {
  top: -5,
  right: -5,
  bottom: -5,
  left: -5
};
var width = 1000 - margin.left - margin.right,
  height = 400 - margin.top - margin.bottom;

//give out random color for circle (currently disable)
var color = d3.scale.category20();

//the Link porperty
var force = d3.layout.force()
  .charge(-200)
  .linkDistance(150)
  .size([width + margin.left + margin.right, height + margin.top + margin.bottom]);

//interactive
var zoom = d3.behavior.zoom()
  .scaleExtent([1, 10])
  .on("zoom", zoomed);

var drag = d3.behavior.drag()
  .origin(function(d) {
    return d;
  })
  .on("dragstart", dragstarted)
  .on("drag", dragged)
  .on("dragend", dragended);

//the main body
var svg = d3.select("#map").append("svg")
  .attr("width", width + margin.left + margin.right)
  .attr("height", height + margin.top + margin.bottom)
  .append("g")
  .attr("transform", "translate(" + margin.left + "," + margin.right + ")")
  .call(zoom)

var rect = svg.append("rect")
  .attr("width", width)
  .attr("height", height)
  .style("fill", "none")
  .style("pointer-events", "all");


//fake data - should have some score and the peoplo s name1
var x = {
  name: 'test',
  Id: '9999',
  score: '100'
};

//var z = "<b>"+x.Id+"</b>""<b>"+x.name+"</b>""<b>"+x.score+"</b>";

var tooltip = d3.select("body")
  .append("div")
  .attr("class", "tooltip")
  .style("position", "absolute")
  .style("z-index", "9999")
  .style("visibility", "hidden")
  //.html(API); should get data from api
  .html("<b>Name : " + x.name + "</b>" + "<p>Id :" + x.Id + "</p>" + "<p>Score :" + x.score + "</p>");
//.html(function(d) { return d.name});


var container = svg.append("g");

//d3.json('http://blt909.free.fr/wd/map2.json', function(error, graph) {

force
  .nodes(graph.nodes)
  .links(graph.links)
  .start();

var link = container.append("g")
  .attr("class", "links")
  .selectAll(".link")
  .data(graph.links)
  .enter().append("line")
  .attr("class", "link")
  .style("stroke-width", function(d) {
    return Math.sqrt(d.value);
  });

var node = container.append("g")
  .attr("class", "nodes")
  .selectAll(".node")
  .data(graph.nodes)
  .enter().append("g")
  .attr("class", "node")
  .attr("cx", function(d) {
    return d.x;
  })
  .attr("cy", function(d) {
    return d.y;
  })
  .call(drag);

node.append("circle")
  .attr("r", function(d) {
    d.radius = d.weight * 2 + 12;
    return d.radius;
  })
  .attr("class", "logo")  
  .style("fill", "transparent")
  .style("stroke", "black")
  .style("stroke-width", 0.25);

node.append("clipPath")
  .attr('id', function(d, i) {
    return "clip" + i
  })
  .append("circle")
  .attr("class", "clip-path")
  .attr("r", function(d) {
    return d.radius;
  })
  .style("fill", function(d) {
    return color(1 / d.rating);
  });

node.append("svg:image")
  .attr("class", "circle")
  .attr("xlink:href", d => d.url)
  .attr("clip-path", function(d, i) {
    return "url(#clip" + i + ")"
  })
  .attr("x", function(d) {
    return -d.radius;
  })
  .attr("y", function(d) {
    return -d.radius;
  })
  .attr("width", function(d) {
    return d.radius * 2;
  })
  .attr("height", function(d) {
    return d.radius * 2;
  });


node.append("text")
  .attr("x", function(d) {
    return d.weight * 2 - 35;
  })
  .attr("y", height / 15 - 38)
  .style("opacity", "1")
  .html(function(d) {
    return d.name
  });


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

var linkedByIndex = {};
graph.links.forEach(function(d) {
  linkedByIndex[d.source.index + "," + d.target.index] = 1;
});

function isConnected(a, b) {
  return linkedByIndex[a.index + "," + b.index] || linkedByIndex[b.index + "," + a.index];
}

//Show tooltip box
node.on("mouseover", function(d) {

  node.classed("node-active", function(o) {
    thisOpacity = isConnected(d, o) ? true : false;
    this.setAttribute('fill-opacity', thisOpacity);
    return thisOpacity;
  });

  link.classed("link-active", function(o) {
    return o.source === d || o.target === d ? true : false;
  });

  d3.select(this).classed("node-active", true);
  
  tooltip.style("visibility", "visible")
  tooltip.style("diplay", "block")
    .style('top', d3.event.pageY - 6 + 'px')
    .style('left', d3.event.pageX + 10 + 'px')

})

//hide tooltip box
.on("mouseout", function(d) {

  node.classed("node-active", false);
  link.classed("link-active", false);
  
  tooltip.style("visibility", "hidden")
});

// On Click, we want to add data to the array and chart
svg.on("click", function() {
  var coords = d3.mouse(this);

  // Normally we go from data to pixels, but here we're doing pixels to data
  var newData = {
    x: Math.round(xScale.invert(coords[0])), // Takes the pixel number to convert to number
    y: Math.round(yScale.invert(coords[1]))
  };

  dataset.push(newData); // Push data to our array

  svg.selectAll("circle") // For new circle, go through the update process
    .data(dataset)
    .enter()
    .append("circle")
    .attr(circleAttrs) // Get attributes from circleAttrs var
    .on("mouseover", handleMouseOver)
    .on("mouseout", handleMouseOut);
})


function dottype(d) {
  d.x = +d.x;
  d.y = +d.y;
  return d;
}

function zoomed() {
  container.attr("transform", "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")");
}

function dragstarted(d) {
  d3.event.sourceEvent.stopPropagation();

  d3.select(this).classed("dragging", true);
  force.start();
}

function dragged(d) {

  d3.select(this).attr("cx", d.x = d3.event.x).attr("cy", d.y = d3.event.y);

}

function dragended(d) {

  d3.select(this).classed("dragging", false);
}

.node {
  font: 10px sans-serif;
}
.node-active {
  stroke: #555;
  stroke-width: 1.5px;
}
.link {
  stroke: #555;
  stroke-opacity: .3;
}
.link-active {
  stroke-opacity: 1;
}
.overlay {
  fill: none;
  pointer-events: all;
}
#map {
  border: 2px #555;
  width: 1100px;
  height: 400px;
}
div.tooltip {
  position: absolute;
  padding: 2px;
  background: white;
  border-radius: 25px;
  padding: 20px;
  border: 2px solid steelblue;
  opacity: 1 !important;
}
.MakeItround {
  border-radius: 50%;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<body>
  <div id="map"></div>
</body>

关于javascript - D3 : combine circles and images，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40901441/

文章推荐： ios - 如何在 cellForItemAt indexPath 内添加约束

文章推荐： java - 如何从另一个 xml 文件动态更新 xml 文件？

文章推荐： swift - swift 中的可选绑定(bind)是值类型还是引用类型？

文章推荐： java - 计算占用网格中的最大覆盖路径

HTML5/CSS3 Circle inside a circle with inner circle stick on top inside the outer circle
我把圆圈旋转了180度，我怎样才能让内圈粘在上面(不旋转它) 最佳答案试试这个代码。我创建了我的 HTML 代码。您的类(class)只需更改即可。 CSS: .outer-circle{
Java Circle to Circle 碰撞检测
我正在制作一个圆圈到圆圈的碰撞检测程序。我可以让球四处移动，但是当检测到碰撞时，球重叠得很远。有什么建议么？提前致谢! import javax.swing.*; import java.awt.*;
Java Circle-Circle 碰撞检测
这是圆类: public class Circle { private double radius; private double x; private double y; }
javascript - Circle to Circle 碰撞响应未按预期工作
我正在制作一个 HTML Canvas 演示，以了解有关圆到圆碰撞检测和响应的更多信息。我相信检测代码是正确的，但响应数学并不完全正确。该演示是使用 TypeScript 实现的，它是 JavaSc
CSS 3 形状 : “Inverse Circle” or “Cut Out Circle”
所以我想在 CSS 中找出一个反圆/切出的圆。目前我找到 this answer 由 ScottS . 他的代码非常适合我，现在我正在寻找相同的效果，但在的另一边元素。因此，我需要在右侧切出而不是
c++ - 重载的 Circle() 在 C++ Circle 类中不明确
我目前正尝试在 C++ 中创建一个 Circle 类，但是当我编译时，我收到一条错误消息，提示“重载的‘Circle’调用不明确。我是 C++ 的新手，不确定这意味着什么。我一直在使用在这里可以找到一
algorithm - 为什么我应该使用 AABB 进行 Circle-Circle 碰撞
在我的 wip 游戏中，我必须实现 Circle-Circle 碰撞。为了实现这一点，我只需计算它们的中心 (x1-x2)² + (y1-y2)² 之间的平方距离。如果它小于它们的平方半径 (r1+r
ios - DACircularProgress Track Circle 大于 Progress Circle
我必须画一个倒数计时器圆圈，我正在使用 this open source图书馆。要求是圆圈充满绿色并在 x 秒内消失。我已经给回圆圈绿色并在其上画了一个白色圆圈，绿色圆圈看起来正在消失。 self.c
ios - Circle UIView 调整大小，动画保持 Circle 形状
我有一个 UIView，我将其背景设为圆形: self.colourView.layer.cornerRadius = 350 self.colourView.clipsToBounds = tr
: Circle behind another circle 之后的 CSS 效果
引用: http://tympanus.net/Development/IconHoverEffects/#set-7 当您滑过上面链接中的任何圆圈图标时，它会以曲线形式淡化(我相信这是弹出的圆圈后面
CSS 3 形状 : "Inverse Circle" or "Cut Out Circle"
我想创建一个形状，我将其描述为“反圆”: 图片有点不准确，因为黑线应该沿着 div 元素的外边界继续。这是我目前拥有的演示:http://jsfiddle.net/n9fTF/ 没有图像的 CSS
javascript - D3 : Attach text to circle such that it has same priority as circle object
我可以将文本添加到我的草图中，但如果我可以将文本直接附加到圆圈上，我会希望它。这意味着如果一个圆圈被另一个圆圈覆盖，文本也会被覆盖。在更高的层面上不是，我发现 d3 模型很难以某种方式构造对象，使它们
python turtle : Draw concentric circles using circle() method
我正在展示用 Python 的 Turtle 模块绘制的孙子图案，他要求看同心圆。我认为使用 turtle 的 circle() 会更快画他们而不是编写自己的代码来生成圆。哈!我被困住了。我看到所产生
javascript - 谷歌地图 : get radius of circle overlay while creating circle
我正在创建一个使用 map 的网络应用程序。在 map 上我正在创建圆圈并希望在 div 中显示半径。通过覆盖完成事件完成半径后，我能够显示半径。但我想在创建圆时显示 div 中的半径，以允许用户以自
javascript - HTML5 Canvas : Colliding a full circle with a segmented circle
编辑:我可以用半径除以 Angular 吗？问题:为了学习 HTML5 Canvas 中的碰撞艺术，我目前正在尝试让整圆与分段圆(在本例中为半圆)发生碰撞。我尝试过的:我的第一个想法是一个简单的圆
css - 边界半径 : 50% produces jagged circles; why not perfect circles?
我发现了其他标题相似的话题，但在这些话题中找不到适合我的解决方案。我试图通过将相等的宽度/高度与 border-radius:50% 相结合来生成完美圆形的输入标签，但边缘出现像素化。我已经为宽度/
javascript - Google Maps V3 Circle 和我创建的 Circle 不匹配
我使用 Google Maps V3 API 创建了一个圆，还尝试制作了一个具有相同半径的标记圆。问题:我创建的是倾斜的，而谷歌地图创建的是一个漂亮的圆圈。出了什么问题？ Google map V3
python - 计算机视觉 : Opencv Counting small circles inside big circle
这是我一直在处理的图像目标是检测大圆圈内的小圆圈。目前我所做的是将图像转换为灰度并应用阈值(cv2.THRESH_OTSU)，从而产生此图像在此之后，我使用我在stackoverflow上找到的
python matplotlib.补丁: draw a Circle patch but keep only part of the circle
我正在尝试绘制一张图片，并且绘制了一个矩形，然后我想绘制一个弧形元素，但是这个元素必须是精确的，并且它只是矩形之外的圆的一部分形状。因此，我尝试使用 Arc patch 来创建相同的东西，但形状不匹配
java - 当 getChildren() 返回一个以 Circle 作为第一个元素的可观察列表时，如何访问 Circle 中的值？
我必须检测 javaFX 程序中两个“球”何时发生碰撞。每次单击按钮时，都会将一个新球添加到 Pane 中。我知道 getChildren() 返回一个可观察列表，其中包含每个球的节点，当我打印带有两

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - D3 : combine circles and images