javascript - 当圆圈改变大小时缩放图像图案
问题描述
我像这样创建我的图像模式:
mainSVG
.append('defs')
.append('pattern')
.attr('id', `pic${vertex.id}`)
.attr('patternUnits', 'userSpaceOnUse')
.attr('x', -vertex.radius)
.attr('y', -vertex.radius)
.attr('width', vertex.radius * 2)
.attr('height', vertex.radius * 2)
.append('image')
.attr('fill', 'red')
.attr('xlink:href', vertex.picture)
.attr('width', vertex.radius * 2)
.attr('height', vertex.radius * 2);
我像这样创建我的圈子:
node
.enter()
.append('g')
.attr('class', 'node')
.call(force.drag)
.append('svg:circle')
.attr('r', x => x.radius)
.attr('id', x => `node${x.id}`)
.attr('class', 'nodeStrokeClass')
.attr('stroke', 'gray')
.attr('stroke-width', '2')
.attr('fill', x => `url(#pic${x.id})`)
.on('mouseover', function(v) {
d3.select(`#node${v.id}`)
.transition()
.attr('r', v.radius * 1.5);
})
.on('mouseout', function(v) {
d3.select(`#node${v.id}`)
.transition()
.attr('r', v.radius);
});
我怎样才能有圆圈的图像比例?
解决方案
必要的更改很少:
- 而不是
.attr('patternUnits', 'userSpaceOnUse')
,做.attr('patternContentUnits', 'objectBoundingBox')
。 <pattern>
将 和 的宽度和高度都设置<image>
为1
(或100%
)。
这是生成的演示(将鼠标悬停在圆圈上):
const mainSVG = d3.select('svg');
const defs = mainSVG.append('defs')
.append('pattern')
.attr('id', 'foo')
.attr('width', 1)
.attr('height', 1)
.attr('patternContentUnits', 'objectBoundingBox')
.append('image')
.attr('xlink:href', 'https://cdn2-www.dogtime.com/assets/uploads/2010/12/senior-dog-2.jpg')
.attr('preserveAspectRatio', 'none')
.attr('width', 1)
.attr('height', 1);
const circle = mainSVG.append('circle')
.attr('r', 30)
.attr('cx', 150)
.attr('cy', 75)
.attr('stroke', 'gray')
.attr('stroke-width', '2')
.attr('fill', 'url(#foo)')
.on('mouseover', function() {
d3.select(this)
.transition()
.attr('r', 70);
})
.on('mouseout', function() {
d3.select(this)
.transition()
.attr('r', 30);
});
<script src="https://d3js.org/d3.v5.min.js"></script>
<svg></svg>
您可以在这个出色的答案中阅读更多相关信息(但不是重复的)。
推荐阅读
- javascript - 使用 unicode 字符进行空间检查的正则表达式
- android - 如何恢复检查到达列表底部以检查到达顶部(recyclerView)的方法?
- python - 涉及多个特征时如何处理文本分类问题
- php - 我应该在当前文件中添加文件上传大小而不在服务器上添加 php.ini 和 htaccess
- apache-kafka - Kafka Streams 的时间窗口如何或何时过期?
- search - pycharm jetbrains 搜索不在 test*.py 文件名模式中的文本
- oracle - 对象不再存在
- typescript - 以数组形式访问静态只读属性
- python - 无法弄清楚如何使用 Spyne 将 Python dict/Json 作为 xml 返回
- scala - 如何使用 Datastax 连接器从 Spark Dataframe 更新特定的 Cassandra 列集