d3.js-每个句子重置位置变量

mqxuamgl  于 2021-09-13  发布在  Java
关注(0)|答案(2)|浏览(287)

这个例子一行一行地画句子。当前位置变量总是增加,如何在新句子开始时将其重置为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>
ebdffaop

ebdffaop1#

在对代码进行最小更改的情况下,如果在重置之前设置最大行数(此处 maxNumber )您可以在此处获取父组的索引 thisIndex )并使用余数运算符设置 pos 变量:

pos = !((thisIndex + 1) % maxNumber) ? 10 : pos + bbox + 2

这是您使用的代码 5 作为最大值:

console.clear()
var data = `Foo
Bar
Baz
Foo
Bar
Baz
Foo
Bar
Baz
Foo
Bar
Baz
Foo
Bar
Baz`

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 maxNumber = 5
var gbox = d3.local()
var index = d3.local()
var lines = svg.selectAll('lines')
  .data(root).enter()
  .append('g')
  .attr('transform', (d, i, n) => {
    index.set(n[i], i);
    return `translate(0,${i*15})`
  })
var words = lines.selectAll('text')
  .data(d => d).enter()
  .append('text')
  .text(d => d)
  .attr('fill', 'black')
  .attr('x', (_, i, n) => {
    var bbox = n[i].parentNode.previousSibling ? n[i].parentNode.previousSibling.firstChild.getComputedTextLength() : n[i].getComputedTextLength();
    var curr = pos
    var thisIndex = index.get(n[i])
    pos = !((thisIndex + 1) % maxNumber) ? 10 : pos + bbox + 2
    return curr
  })
  .attr('y', 20)
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/6.7.0/d3.min.js"></script>

没有关系,我在这里改变 getBBox() 在你的代码中 getComputedTextLength() .

ffx8fchx

ffx8fchx2#

如果索引更改,则重置当前位置。

console.clear()

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 index = d3.local()
var lines = svg.selectAll('lines')
.data(root).enter()
.append('g')
.attr('transform',(d,i,n) => {
  index.set(n[i], i);
  return `translate(0,${i*20})`
})

var prevIdx = -1
var maxNumber = 5
var words = lines.selectAll('text')
.data(d => d).enter()
.append('text')
.text(d => d)
.attr('fill','black')
.attr('x',(d,i,n) => {
  var thisIndex = index.get(n[i])
  if (prevIdx != -1) {
    if (prevIdx != thisIndex) {
      pos = 10
    }
  }
  prevIdx = thisIndex
  var curr = pos
  var w = d3.select(n[i]).node().getComputedTextLength()
  pos += w + 2
  return curr
})
.attr('y',20)
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/6.7.0/d3.min.js"></script>

相关问题