D3.js小练习_动态更新坐标系和网格

d3, 坐标

《three.js使用多个渐变torus模拟光环光晕》申请公开！

第三方库
作品简介 4109
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

HTML

<html>

<body>

function renderxAxis() {
            xScale = d3.scale.linear()
                .domain([0, 100])
                .range([0, xAxisWidth]);
            xAixs = d3.svg.axis()
                .scale(xScale)
                .orient("bottom");

svg.append("g")
                .attr("class", "x_axis")
                .attr("transform", function() {
                    return "translate(" + margin + "," + (height - margin) + ")";
                })
                .call(xAixs);
        }

function renderyAxis() {
            yScale = d3.scale.linear()
                .domain([100, 0])
                .range([0, yAxisWidth]);
            yAixs = d3.svg.axis()
                .scale(yScale)
                .orient("left");

svg.append("g")
                .attr("class", "y_axis")
                .attr("transform", function() {
                    return "translate(" + margin + "," + margin + ")";
                })
                .call(yAixs);
        }

function renderXGridlines() {
            var lines = d3.selectAll("g.x_axis g.tick")
                .select("line.grid-line")
                .remove();
            lines = d3.selectAll("g.x_axis g.tick")
                .append("line")
                .classed("grid-line", true);

lines.attr("x1", 0)
                .attr("y1", 0)
                .attr("x2", 0)
                .attr("y2", -yAxisWidth);
        }

function renderYGridlines() {
            var lines = d3.selectAll("g.y_axis g.tick")
                .select("line.grid-line")
                .remove();
            lines = d3.selectAll("g.y_axis g.tick")
                .append("line")
                .classed("grid-line", true);

lines.attr("x1", 0)
                .attr("y1", 0)
                .attr("x2", xAxisWidth)
                .attr("y2", 0);
        }

function rescale() {
            var Xmax = Math.round(Math.random() * 100);
            xAixs.scale()
                .domain([0, Xmax]);
            svg.selectAll("g.x_axis")
                .transition()
                .call(xAixs);
            renderXGridlines();
            var Ymax = Math.round(Math.random() * 80);
            yAixs.scale().domain([Ymax, 0]);
            svg.selectAll("g.y_axis")
                .transition()
                .call(yAixs);
            renderYGridlines();

}
        renderxAxis();
        renderyAxis();
        renderXGridlines();
        renderYGridlines();
    </script>
    <div class="control-group">
        <button onclick="rescale()">Rescale</button>
    </div>
</body>

</html>

d3, 坐标

编辑器支持Emmet

快捷键

d3, 坐标

D3.js 最小化的光网格

D3.js 实时模型图示例 - 鼠标移动监测

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：