天天看點
傳回

D3學習：互動式操作

基于柱形圖的簡單互動操作

最近一段時間的D3學習全部是基于http://www.ourd3js.com/wordpress/

這個網站的，版權全部歸上述網站所有，我就不每次都強調一遍了。

前兩天剛看了一個js講動畫的視訊，今天正好用上，好開森~

内容比較好了解，直接上代碼啦~

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>D3：互動式學習簡單例子</title>
        <style type="text/css">
        .axis path,
        .axis line {
            fill:none;
            stroke:black;
            shape-rendering:crispEdges;
        }
        .axis text {
            font-family: sans-serif;
            font-size: px;
        }
        </style>
        <script type="text/javascript" src="../d3/d3.min.js"></script>
    </head>
    <body>
        <script type="text/javascript">
        var height = ,
            width = ;

        var dataset = [, , , , , ];

        var padding = {left:, right:, top:, bottom:};

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

        var xScale = d3.scale.ordinal()
                       .domain(d3.range(dataset.length))
                       .rangeRoundBands([, width - padding.left - padding.right]);

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

        var xAxis = d3.svg.axis()
                      .scale(xScale)
                      .orient("bottom");

        var yAxis = d3.svg.axis()
                      .scale(yScale)
                      .orient("left");

        var rectPadding = ;

        var rects = svg.selectAll("rect")
                       .data(dataset)
                       .enter()
                       .append("rect")
                       .attr("transform", "translate(" + padding.left + "," + padding.top + ")")
                       .attr("x", function (d, i) {return xScale(i) + (rectPadding / );})
                       .attr("y", function (d) {return yScale(d);})
                       .attr("width", xScale.rangeBand() - rectPadding)
                       .attr("height", function (d) {return height - padding.top - padding.bottom - yScale(d);})
                       .style("fill","blue")
                       .on("mouseover", function (d,i) {d3.select(this).style("fill", "yellow")})
                       .on("mouseout", function (d, i) {
                        d3.select(this)
                          .transition()
                          .duration()
                          .style("fill", "blue");
                       });

        var texts = svg.selectAll("text")
                       .data(dataset)
                       .enter()
                       .append("text")
                       .attr("transform", "translate(" + padding.left + "," + padding.top + ")")
                       .attr("x", function (d,i) {return xScale(i) + (rectPadding / );})
                       .attr("y", function (d) {return yScale(d);})
                       .attr("dx",(xScale.rangeBand() - rectPadding) / )
                       .attr("dy", )
                       .style("fill", "white")
                       .style("text-anchor", "middle")
                       .text(function (d) {return d;});



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

        svg.append("g")
           .attr("class", "axis")
           .attr("transform","translate(" + padding.left + "," + padding.top + ")")
           .call(yAxis);
        </script>
    </body>
</html>
d3
上一篇: 資訊加密技術介紹資訊加密介紹對稱加密介紹非對稱加密組合加密參考資料
下一篇: d3的阻止冒泡d3的阻止冒泡

繼續閱讀