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里面。

### 使用D3.js创建SVG图形的方法 #### 绘制基础形状 在D3.js中,创建SVG图形通常涉及以下几个方面: - **引入库文件**:确保页面已经加载了D3.js库。这可以通过CDN链接完成。 ```html <script src="https://d3js.org/d3.v7.min.js"></script> ``` - **准备容器**:定义一个用于容纳SVG图像的HTML元素,通常是`<div>`标签,并为其设置ID以便后续引用。 ```html <div id="chart"></div> ``` - **初始化SVG画布**:利用D3选择器选取目标DOM节点并附加新的SVG对象,指定宽度和高度作为绘图区域边界。 ```javascript const width = 800; const height = 600; // 创建SVG元素 var svg = d3.select("#chart") .append("svg") .attr("width", width) .attr("height", height); ``` - **添加基本几何体**:向SVG内追加矩形(rect)、圆形(circle)等简单图形,同时应用样式属性控制外观特征[^1]。 ```javascript // 添加矩形 svg.append("rect") .attr("x", 50).attr("y", 50) .attr("width", 100).attr("height", 100) .style("fill", "#ffcccb"); // 添加圆圈 svg.append("circle") .attr("cx", 200).attr("cy", 100) .attr("r", 50) .style("fill", "blue"); ``` #### 数据驱动绘制路径 对于更复杂的图表结构,比如折线图或曲线,可以采用路径(path)形式表示。这里展示了如何根据给定的数据集构建线条轨迹。 ```javascript let lineData = [ {x: 50, y: 10}, {x: 70, y: 40}, {x: 90, y: 10} ]; // 定义比例尺转换关系 let xScale = d3.scaleLinear() .domain([0, d3.max(lineData, function(d){return d.x;})]) .range([0, width]); let yScale = d3.scaleLinear() .domain([0, d3.max(lineData, function(d){return d.y;})]) .range([height, 0]); // 注意坐标系反转 // 构建line生成器 let lineGenerator = d3.line() .x(function(d,i){ return xScale(d.x); }) .y(function(d,i){ return yScale(d.y); }); // 将数据绑定至新加入的<path>元素上 svg.append("path") .datum(lineData) .attr("class","line") .attr("d", lineGenerator) .attr("stroke","#FFAB00").attr("stroke-width",2) .attr("fill","none"); ``` 上述代码片段说明了怎样运用D3.js结合SVG技术实现自定义矢量图形的设计与渲染过程。值得注意的是,在实际开发过程中还需要考虑交互效果以及响应式布局等问题[^3]。
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值