小编Hel*_*rld的帖子

如何使用d3.js更新轴

我试图在图表上显示不同的数据.用户可以单击单选按钮更改显示的数据.我正在使用"气泡图"来渲染数据.

对于每种类型的数据,我需要更新Yaxis(域不同).这就是我现在所做的:

图表初始化

var svg = d3.select("body .main-content").append("svg")
    .attr("class", "chart")
    .attr("width", width)
    .attr("height", height);
Run Code Online (Sandbox Code Playgroud)

初始化轴

initAxis();
function initAxis()
{
    var y = d3.scale.linear().domain([0,1000]).range([height-margin, margin]).nice(),
        x = d3.scale.linear().domain([0,23]).range([margin,width-margin]),
        yAxis = d3.svg.axis().scale(y).orient("left"),
        xAxis = d3.svg.axis().scale(x).orient("bottom");

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

    svg.append("g")
        .attr("class", "x axis")
        .attr("transform", "translate(0," + (height - margin) + ")")
        .call(xAxis);
}
Run Code Online (Sandbox Code Playgroud)

更新图表

    function update(type)
    {
        // Get the data
        type = type || 'default';
        var m = max[type],
            mi = min[type]+0.1,
            data = …
Run Code Online (Sandbox Code Playgroud)

d3.js

48
推荐指数
2
解决办法
4万
查看次数

标签 统计

d3.js ×1