这个例子一行一行地画句子。当前位置变量总是增加,如何在新句子开始时将其重置为10!
console.clear()
var data = `Hello word,d3.js.
Drawing with d3 is funny!
I like to play with it.`
var root = []
var sentences = data.split('\n')
sentences.forEach(d => {
root.push(d.split(' '))
})
var svg = d3.select('body').append('svg')
.attr('width',300)
.attr('hegith',300)
.style('border','5px solid red')
var pos = 10
var gbox = d3.local()
var lines = svg.selectAll('lines')
.data(root).enter()
.append('g')
.attr('transform',(d,i) => {
return `translate(0,${i*20})`
})
var words = lines.selectAll('text')
.data(d => d).enter()
.append('text')
.text(d => d)
.attr('fill','black')
.each((d,i,n) => {
var bbox = d3.select(n[i]).node().getBBox()
gbox.set(n[i],bbox)
})
.attr('x',(d,i,n) => {
var bbox = gbox.get(n[i])
var curr = pos
pos += bbox.width + 2
return curr
})
.attr('y',20)
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/6.7.0/d3.min.js"></script>
2条答案
按热度按时间ebdffaop1#
在对代码进行最小更改的情况下,如果在重置之前设置最大行数(此处
maxNumber
)您可以在此处获取父组的索引thisIndex
)并使用余数运算符设置pos
变量:这是您使用的代码
5
作为最大值:没有关系,我在这里改变
getBBox()
在你的代码中getComputedTextLength()
.ffx8fchx2#
如果索引更改,则重置当前位置。