d3,svg中如何让rect上显示文字

d3,svg中如何让rect上显示文字

慕的地10843

我在查资料的时候发现要在rect外包裹一层g才能显示text的文本内容

控制台结构和上面一样但是为什么还是不能显示出text的内容呢。

var svg = d3.select('body').append('svg').attr('width',400).attr('height',500)
var g = svg.append('g')
var rect = g.append('rect').attr('width',40).attr('height',40)
var text = g.append('text').text('wa').attr('fill','white')
  .attr('x', 20)
  .attr('y', 20)
  .attr('text-anchor', 'middle')
  .style('font-size', '20px')
  .attr('dy', 8)

感觉你写的方式不怎么可靠,你可以在rect下面添加一个text元素,然后给text元素的x和y属性一定的值把文本定位到rect里面。

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
要在d3的节点图标上添文字,可以按照以下步骤实现: 1. 在Vue组件引入d3库,并定义一个方法来生成d3图表。 ```javascript import * as d3 from 'd3'; export default { data() { return { // ... }; }, methods: { generateD3Chart() { const svg = d3.select('#chart'); // ... }, }, }; ``` 2. 在generateD3Chart方法,使用d3提供的方法创建节点,并为每个节点添图标和文字。 ```javascript generateD3Chart() { const svg = d3.select('#chart'); const nodes = [ { id: 1, name: 'Node 1', type: 'A' }, { id: 2, name: 'Node 2', type: 'B' }, { id: 3, name: 'Node 3', type: 'C' }, ]; const node = svg.selectAll('.node') .data(nodes) .enter() .append('g') .attr('class', 'node'); node.append('rect') .attr('width', 50) .attr('height', 50) .attr('fill', 'white') .attr('stroke', 'black'); node.append('text') .text(d => d.name) .attr('x', 25) .attr('y', 70) .attr('text-anchor', 'middle'); node.append('image') .attr('href', d => { if (d.type === 'A') { return '/path/to/image1.png'; } else if (d.type === 'B') { return '/path/to/image2.png'; } else { return '/path/to/image3.png'; } }) .attr('x', 5) .attr('y', 5) .attr('width', 40) .attr('height', 40); }, ``` 在上面的代码,我们为每个节点添了一个text元素,并将节点的name属性作为文字内容。注意,我们将text元素的y坐标设置为70,以确保文字显示在节点图标下方。 3. 在Vue组件的mounted钩子函数调用generateD3Chart方法。 ```javascript export default { // ... mounted() { this.generateD3Chart(); }, }; ``` 这样就可以在d3的节点图标上添文字了。
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值