- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我正在尝试加载图像作为背景/填充到图表上的我的节点上,每个节点都有自己的 ID,并且有一些端点,如果您解析 ID,则返回该特定节点的正确图像。
我想解析节点 ID 并以这种方式加载背景图像,我发现唯一适用于我的代码的方法是首先在我的节点上附加一个包含 URL 的“模式”,然后引用它附加我的节点时。我不知道如何通过节点的 ID 进行迭代和执行此操作,此 ID 应该会提取正确的图像!
代码:
addCircleNodes(onClick: (node: EngagementGraphNode) => void): void {
var img_url = `https://jimjamsDoughnuts/ID-12345/standard`
const circle = this.group
.selectAll('circle.node')
.data(this.nodes)
.enter();
circle
.append("pattern")
.attr("id", "insightImage")
.attr("patternContentUnits", "objectBoundingBox")
.attr("width", "100%")
.attr("height", "100%")
.attr("x", 0)
.attr("y", 0)
.append("image")
.attr("xlink:href", img_url)
.attr("x", 0)
.attr("y", 0)
.attr("width", 1)
.attr("height", 1)
.attr('preserveAspectRatio', 'xMidYMid slice');
circle
.filter(node => node.depth !== 0)
.append('circle')
.classed('Engagement-GraphNode', true)
.classed('Engagement-GraphNodeBackground', true)
.classed('Engagement-GraphLeaf', node => node && (node.depth === 4 && !node.isExtraNode))
.style('fill', node => `url(#insightImage)`)
.style('opacity', node => (node.visible) ? 1 : 0)
.style('visibility', node => (node.visible) ? 'visible' : 'hidden')
.on('click', node => onClick(node));
所以目前的结果是我的每个节点都成功加载了同一张图片,我尝试了一个带有 img_url 和 img_id 的 function(d) 方法,但我还没有弄清楚如何解析我自己的 node.id因为我真正想做的是能够调用 url 并说“jimjamsdoughnuts/node.id/standard”
可能像 node = > "jimjamddoughnuts${node.id}/standard"但是调用上面的方法是行不通的!它只有在我第一次附加一个模式后才有效,对于我的生活我不知道为什么!
我在网上找到了这个资源,它处理遍历元素和添加图像,但我不太明白如何将我自己的 node.id 合并到其中:http://bl.ocks.org/SpaceActuary/25e72aadac28f2c87667816e82c609db
非常感谢,如果你能帮忙。
最佳答案
The D3 convention is that callback functions are passed the element’s datum (typically called d), the element’s index (i), and the array of elements (nodes). The element itself is this.
所以传递一个回调函数作为.attr()
的值到达绑定(bind)数据 (d)。一旦你有了数据,它就像用 d.someProperty
返回形成的 url 字符串一样简单。 .
但是当您动态创建一个唯一的 <pattern>
对于每个 <circle>
, 你需要给每个 <pattern>
它有自己的唯一 ID,然后引用那个唯一的 <pattern>
使用其自己的唯一 ID(否则每个 <circle>
都由相同的静态 <pattern>
填充,或者您只是创建具有相同 ID 的多个模式)。
addCircleNodes(onClick: (node: EngagementGraphNode) => void): void {
var img_url = `https://jimjamsDoughnuts/ID-12345/standard`
const circle = this.group
.selectAll('circle.node')
.data(this.nodes)
.enter();
circle
.append("pattern")
.attr("id", d => `insightImage-${d.id}`)
.attr("patternContentUnits", "objectBoundingBox")
.attr("width", "100%")
.attr("height", "100%")
.attr("x", 0)
.attr("y", 0)
.append("image")
.attr("xlink:href", d => `https://jimjamsDoughnuts/${d.id}/standard`)
.attr("x", 0)
.attr("y", 0)
.attr("width", 1)
.attr("height", 1)
.attr('preserveAspectRatio', 'xMidYMid slice');
circle
.filter(node => node.depth !== 0)
.append('circle')
.classed('Engagement-GraphNode', true)
.classed('Engagement-GraphNodeBackground', true)
.classed('Engagement-GraphLeaf', node => node && (node.depth === 4 && !node.isExtraNode))
.style('fill', d => `url(#insightImage-${d.id})`)
.style('opacity', node => (node.visible) ? 1 : 0)
.style('visibility', node => (node.visible) ? 'visible' : 'hidden')
.on('click', node => onClick(node));
关于javascript - 如何附加多个背景图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54514581/
我关注了 tutorial on creating a popup for an add-on在 Firefox 中,效果很好。 我现在遇到的问题是它创建的弹出窗口不会更改大小以适应我添加到其中的内容
我有一些视频,我需要连接一个标题并添加一些覆盖,问题是我需要先做覆盖,否则时间不正确,然后才将标题连接到视频的开头 ffmpeg -i talk.mp4 -i start_pancarte.png
我正在尝试附加一个 CSV 文件。这是我正在使用的线路。不幸的是,我找不到 export-csv 的附加选项。任何想法都有助于使其发挥作用。 Get-ADGroupMember "Domain Adm
我正在努力理解 Attach API (com.sun.tools.attach.*) 的用途。它的典型用途是什么?它是为了“模拟”JVM,以便您可以在不部署/启动代码的情况下测试您的代码吗?它是一个
我不明白为什么这不起作用。 soup_main = BeautifulSoup('FooBar') soup_append = BeautifulSoup('Meh') soup_main.body.
我有以下代码来返回我想要的字符串 $sql = " SELECT `description` FROM `auctions` WHERE `description` REGEX
我正在尝试从数组中附加具有多个值的元素,但我做错了。这是我的代码: for(var i=0; i ` + pricesArray[i].start_date ` ` + pricesArray[i
我正在尝试将图像链接添加到此 javascript 附加表中。使图像位于按钮上方 这是代码 $("#1").append(""+section+""+no+""+price+""+button+""
我有一个问题,我已经解决了,但它太烦人了。 我有一个 js 代码,当使用“追加”按下按钮时,它会放下一些 html 代码,并且通过该代码,我为 x 按钮提供了一个 id,并为容器元素提供了一个 id。
我想逐行读取文件,并且每一行可能都有很多字符。 这个版本的readline效果很好 func readLine(r *bufio.Reader) ([]byte, error) { var (
我有一个网站,每次用户登录或注销时,我都会将其保存到文本文件中。 如果不存在,我的代码在附加数据或创建文本文件时不起作用。这是示例代码 $myfile = fopen("logs.txt", "wr"
我正在尝试使用 typescript 和 Formik 创建一个自定义输入字段。我可以就完成以下代码的最佳方式获得一些帮助吗?我需要添加额外的 Prop 标签和名称......我已经坚持了一段时间,希
我有一个字符串 big_html,我想将它添加到某个 div 中。我观察到以下方面的性能差异: $('#some-div').append( big_html ); // takes about 10
如何使用 FormData 创建以下结果 ------WebKitFormBoundaryOmz20xyMCkE27rN7 Content-Disposition: form-data; name="
有没有办法附加 jQuery 事件处理程序,以便在任何先前附加的事件处理程序之前触发该处理程序?我遇到了this article ,但代码不起作用,因为事件处理程序不再存储在数组中,而这正是他的代码所
我正在开发一个需要网络登录的 iPhone 应用程序。像往常一样我打电话 [[UIApplication sharedApplication] openURL:loginURL]; 这将关闭应用程序并
我想开发一个仅针对特定域激活的扩展。 我不希望它在不浏览此特定域时出现在浏览器菜单中。 有可能这样做吗? 最佳答案 可能:对于菜单,您可以添加一个弹出窗口侦听器,用于检查当前加载的URL(docs f
这段 JavaScript 代码 function writeCookie(CookieName, CookieValue, CookieDuration) { var expiration
我正在使用 Handlebars 来渲染使用ajax从本地服务器获得的信息。我的 HTML 看起来像: {{#each Tabs}}
我尝试了以下代码,但当输入框中没有数据时它不会通知。当我直接添加此内容(不附加)时,它会起作用。我在这里做错了什么 var output = "\n"+ "\n"+
我是一名优秀的程序员,十分优秀!