Question

我目前正在使用D3代码，其中垂直条增加了与滑块移动相对应的宽度。但是当我们回到默认位置时，我希望条形显示初始值而不是默认值。为了使滑块工作，我正在使用jquery的Math.min函数，但这并不完美。 CA有人请帮忙。

<!DOCTYPE html>
<html lang="en">

  <head>
    <style>

    .axis path,
.axis line {
    fill: none;
    stroke: black;
    shape-rendering: crispEdges;
}

.axis text {
    font-family: sans-serif;
    font-size: 11px;
}

body {
    font: 10px sans-serif;
    <!--padding-top:50px;-->
}

div#slider{
    width: 940px;
    margin-left: 8%;

    margin-top: 4%; 
    }
svg {
    margin-left:3%; 
    }
    </style>
    <script data-require="jquery@2.1.4" data-semver="2.1.4" src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
    <link data-require="jqueryui@1.10.0" data-semver="1.10.0" rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.0/css/smoothness/jquery-ui-1.10.0.custom.min.css" />
    <script data-require="jqueryui@1.10.0" data-semver="1.10.0" src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.0/jquery-ui.js"></script>
    <script data-require="d3@*" data-semver="3.5.3" src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.3/d3.js"></script>

  </head>

 <body>
    <div id="slider"></div>
    <script>
    $(function() {

        $("#slider").slider({
            min: 30,
            max: 950,
            // on slide adjust width of all rects
            slide: function(event, ui) {
                svg.selectAll("rect")
                        .attr("width", function (d) {
                            return Math.min(ui.value * d.rate, d.max);
                        })
            }
        });

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


        // add 4 rects
        var data = [
            { row:1, rate:0.4, max:550 },
            { row:2, rate:0.5, max:600 },
            { row:3, rate:0.6, max:700 },
            { row:4, rate:0.7, max:750 },
            { row:5, rate:0.8, max:780 },
            { row:6, rate:0.9, max:800 },
            { row:7, rate:1.0, max:950 },
        ];

        svg.selectAll("g")
                .data(data)
                .enter()
                .append("rect")
                .attr("x", 20)
                .attr("y", function(d) {
                    return d.row * 30;
                })
                .attr("height", 20)
                .attr("width", 20)
                .style("fill","blue")
                .style("margin-top",20)
                .attr("transform", "translate(20,0)");

      //add x and y axis
   var x = d3.scale.linear()
                    .range([0, 950]);

                var y = d3.scale.linear()
                    .range([200, 0]);

                       var xAxis = d3.svg.axis()
                    .scale(x)
                    .orient("bottom")
                    .ticks(5)


                var yAxis = d3.svg.axis()
                    .scale(y)
                    .orient("left")
                    .ticks(7);

                     x.domain([0,25]);

                y.domain([0,7]);

                svg.append("g")
                    .attr("class", "x axis")
                    .attr("transform", "translate(30,260)")
                    .call(xAxis);

                svg.append("g")
                    .attr("class", "y axis")
                     .attr("transform", "translate(20,30)")
                    .call(yAxis);

    });
    </script>
  </body>

</html>

Answer 1

在幻灯片活动中：

slide: function(event, ui) {
    svg.selectAll("rect")
        .attr("width", function (d) {
            return Math.min(ui.value * d.rate, d.max);
    })
}

您希望使用ui.value

来设置条件

这样的事情：

slide: function(event, ui) {
    svg.selectAll("rect")
        .attr("width", function (d) {
            if(ui.value === 0){
                // return your default width here
            } else {
                return Math.min(ui.value * d.rate, d.max);
            }
    })
}

使用D3

1 个答案: