Javascript 有没有办法让条形图行在D3中显示不同的转换速率_Javascript_Jquery_Html_Css_D3.js

Javascript 有没有办法让条形图行在D3中显示不同的转换速率

javascript jquery html css d3.js

Javascript 有没有办法让条形图行在D3中显示不同的转换速率,javascript,jquery,html,css,d3.js,Javascript,Jquery,Html,Css,D3.js,是否有任何方法以不同的转换速率对每行进行转换，并为它们提供不同的最小值和最大值。目前，所有的酒吧正在同时扩大其大小-希望有不同的值为初始点和最终点谢谢 $（函数（）{ $（“#滑块”）.滑块({ 最低:100,，最高：500， //在幻灯片上调整所有矩形的宽度幻灯片：功能（事件、用户界面）{ svg.selectAll（“rect”） .attr（“宽度”，用户界面值）； } }); //创建svg var svg=d3.选择（“主体”） .append（“svg”） .attr（“宽

是否有任何方法以不同的转换速率对每行进行转换，并为它们提供不同的最小值和最大值。目前，所有的酒吧正在同时扩大其大小-希望有不同的值为初始点和最终点

谢谢


$（函数（）{
$（“#滑块”）.滑块({
最低:100,，
最高：500，
//在幻灯片上调整所有矩形的宽度
幻灯片：功能（事件、用户界面）{
svg.selectAll（“rect”）
.attr（“宽度”，用户界面值）；
}
});
//创建svg
var svg=d3.选择（“主体”）
.append（“svg”）
.attr（“宽度”，600）
.attr（“高度”，600）；
//添加4个矩形
svg.selectAll（“rect”）
.数据（[1,2,3,4]）
.输入（）
.append（“rect”）
.attr（“x”，10）
.attr（“y”，函数（d）{
返回d*25；
})
.attr（“高度”，20）
.attr（“宽度”，100）；
});

在d3中，只要数据中有信息，几乎可以控制一切。可以根据绑定到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);
        });
    }
});

这显然不是你想要的，但我只是想告诉你，你可以根据提供的数据灵活地调整你的ui，这确实是D3（数据驱动ui）的核心。希望这能有所帮助

<!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>


$（函数（）{
$（“#滑块”）.滑块({
最低:100,，
最高：500，
//在幻灯片上调整所有矩形的宽度
幻灯片：功能（事件、用户界面）{
svg.selectAll（“rect”）
.attr（“宽度”，函数（d）{
返回数学最小值（ui.value*d.rate，d.max）；
});
}
});
//创建svg
var svg=d3.选择（“主体”）
.append（“svg”）
.attr（“宽度”，600）
.attr（“高度”，600）；
//添加4个矩形
风险值数据=[
{行：1，速率：1.1，最大值：100}，
{行数：2，速率：1.2，最大值：200}，
{行数：3，速率：1.3，最大值：300}，
{行数：4，速率：1.4，最大值：400}，
];
svg.selectAll（“rect”）
.数据（数据）
.输入（）
.append（“rect”）
.attr（“x”，10）
.attr（“y”，函数（d）{
返回d行*25；
})
.attr（“高度”，20）
.attr（“宽度”，100）；
});

您只需为属性设置不同的起点和终点即可。

<!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>