d3中文案例_D3+svg 案例

最新推荐文章于 2024-05-07 21:34:26 发布

weixin_39943799

最新推荐文章于 2024-05-07 21:34:26 发布

阅读量197

点赞数

文章标签： d3中文案例

本文链接：https://blog.csdn.net/weixin_39943799/article/details/111954837

版权

本文介绍了如何使用D3.js创建散点图，通过linear尺度设置数据范围，并演示了如何调整x轴和y轴的刻度以及文本标签的配置。重点在于展示如何运用domain()和range()方法来定制数据映射到SVG元素上的效果。

摘要由CSDN通过智能技术生成

//domain():设置尺度的输入范围，参数以数组的形式传入。

//range() :输出范围的设置

var padding =30;

var xScale = d3.scale.linear().domain([0, d3.max(dataArr, function(d) { return d[0]})]).range([padding, width-padding*2]);

var yScale = d3.scale.linear().domain([0, d3.max(dataArr, function(d) { return d[1]})]).range([height-padding,padding]);

var rScale = d3.scale.linear().domain([0, d3.max(dataArr, function(d) { return d[1]})]).range([2, 5]);

//__________________________散点图+尺度_________________________________

var svg = d3.select("body").append("svg").attr("width",width).attr("height",height);

var circle=svg.selectAll("circle") .data(dataArr).enter().append("circle");

circle.attr("cx", function(d) {return xScale(d[0])}).attr("cy", function(d){return yScale(d[1])})

.attr("r", function(d) { return rScale(d[1])});

var text=svg.selectAll("text").data(dataArr).enter().append("text").text(function(d){return d[0]+","+d[1]});

text.attr("x", function(d) {return xScale(d[0])}).attr("y", function(d) {return yScale(d[1])})

.attr("font-family", "sans-serif").attr("font-size", "11px").attr("fill", "red");

var xAxis = d3.svg.axis().scale(xScale).orient("bottom").ticks(5); //设置x轴

var yAxis = d3.svg.axis().scale(yScale).orient("left").ticks(5);//设置Y轴

svg.append("g").attr("class", "axis").attr("transform", "translate(0," + (height - padding) + ")").call(xAxis);

svg.append("g") .attr("class", "axis").attr("transform", "translate(" + padding + ",0)").call(yAxis);

}

关注