条形图行以任何方式在D3中显示不同的转换率

Question

Is there any way to make the transition of each row with different transition rate and provide them with different minimum and maximum value. 有没有办法使每行的过渡具有不同的过渡速率，并为它们提供不同的最小值和最大值。 Currently all the bars are expanding their size simultaneously - want to have different value for initial point and final point. 当前，所有条形都在同时扩展其大小-希望起点和终点具有不同的值。

Thanks 谢谢

<head>
  <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@3.5.3" 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: 100,
        max: 500,
        // on slide adjust width of all rects
        slide: function(event, ui) {
          svg.selectAll("rect")
            .attr("width", ui.value);
        }
      });

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

      // add 4 rects
      svg.selectAll("rect")
        .data([1, 2, 3, 4])
        .enter()
        .append("rect")
        .attr("x", 10)
        .attr("y", function(d) {
          return d * 25;
        })
        .attr("height", 20)
        .attr("width", 100);

    });
  </script>
</body>

</html>

Answer 1

In d3, you can pretty much control everything as long as you have the information in your data. 在d3中，只要您的数据中包含信息，您就几乎可以控制一切。 You can control the width of the bar base on your data binded to the dom, for example: 您可以根据绑定到dom的数据来控制条形的宽度，例如：

var data = [ { rate:1.1, max:100 }, { rate:1.2, max:200 }, { row:1.3, max:300 }, { row:1.4, max:400 }];

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

This obviously not what you exactly want, but I am just trying to show you can flexibly adjust your ui base on the provided data, which is indeed the core of D3 (data driven UI). 这显然不是您真正想要的，但我只是想表明您可以根据提供的数据灵活地调整ui，这确实是D3（数据驱动的UI）的核心。 Hopefully this help. 希望有帮助。

<!DOCTYPE html>
<html lang="en">
<head>
    <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="http://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.0/jquery-ui.js"></script>
    <script src='http://d3js.org/d3.v3.min.js'></script>
</head>
<body>
<div id="slider"></div>
<script>
    $(function() {

        $("#slider").slider({
            min: 100,
            max: 500,
            // 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", 600)
                .attr("height", 600);

        // add 4 rects
        var data = [
            { row:1, rate:1.1, max:100 },
            { row:2, rate:1.2, max:200 },
            { row:3, rate:1.3, max:300 },
            { row:4, rate:1.4, max:400 },
        ];

        svg.selectAll("rect")
                .data(data)
                .enter()
                .append("rect")
                .attr("x", 10)
                .attr("y", function(d) {
                    return d.row * 25;
                })
                .attr("height", 20)
                .attr("width", 100);

    });
</script>
</body>
</html>

条形图行以任何方式在D3中显示不同的转换率

问题描述

1 个解决方案

解决方案1
0 已采纳 2015-10-18 21:57:42

条形图行以任何方式在D3中显示不同的转换率

问题描述

1 个解决方案

解决方案1 0 已采纳 2015-10-18 21:57:42

解决方案1
0 已采纳 2015-10-18 21:57:42