Javascript d3.js标记了水平条形图，但提供了动画功能

我已经创建了各种垂直条形图，但需要重新调整以在水平模式下工作

//静态垂直图

//动画垂直图表

这将围绕轴交换

  var x = d3.scaleBand()
    .rangeRound([0, width]).padding(0.1);

  var y = d3.scaleLinear()
    .range([height, 0]);

  var xAxis = d3.axisBottom(y);
  var yAxis = d3.axisLeft(x);

但可能还需要重建它，使其看起来像以下线框概念

试试这个，

从这里

---

这里给出了一个完全响应的水平条形图，旁边有标签和动画效果：

var margin={top:20，right:20，bottom:50，left:100}，
width=parseInt（d3.select（#chart”）.style（“width”））-margin.left-margin.right，
height=parseInt（d3.select（#chart”）.style（“height”））-margin.top-margin.bottom；
var yScale=d3.scale.ordinal（）
.范围圆带（[高度，0]，0.1）；
var xScale=d3.scale.linear（）
.范围（[0，宽度]）；
var dollarFormatter=d3.format（“，.0f”）
var yAxis=d3.svg.axis（）
.刻度（yScale）
.东方（“左”）；
var xAxis=d3.svg.axis（）
.scale（xScale）
.orient（“底部”）
.tickFormat（函数（d）{return dollarFormatter（d）；}）；
var svg=d3。选择（“图表”）
.attr（“宽度”，宽度+边距。左侧+边距。右侧）
.attr（“高度”，高度+边距。顶部+边距。底部）
.附加（“g”）
.attr（“转换”、“平移”（+margin.left+）、“+margin.top+”）；
风险值数据=[
{
“指标”：“销售额”，
“名称”：“梨”，
“总计”：2020.161
},
{
“指标”：“销售额”，
“名称”：“苹果”，
“总计”：2122.545
},
{
“指标”：“销售额”，
“名称”：“香蕉”，
“总数”：4154.9
}];
//筛选以选择子集
变量子集=data.filter（函数（el）{
回报率（el[“公制]）；
});
//对数据进行排序，使条形图按降序排序
subset=subset.sort（函数（a，b）{返回a[“total”]-b[“total”]；}）；
域（subset.map（函数（d）{returnd[“Name”]；}））；
域（[0，d3.max（子集，函数（d）{返回d[“total”]；}）]）；
svg.append（“g”）
.attr（“类”、“y轴”）
.呼叫（yAxis）；
svg.append（“g”）
.attr（“类”、“x轴”）
.呼叫（xAxis）
.attr（“变换”、“平移（0）”、“高度+”）
.append（“文本”）
svg.selectAll（“.bar”）
.数据（子集）
.enter（）.append（“rect”）
.attr（“类”、“条”）
//.attr（“y”，函数（d）{return yScale（d[“Name”]）；}）
//.attr（“高度”，yScale.rangeBand（））
.attr（“宽度”，0）
.transition（）
.持续时间（500）
.delay（函数（d，i）{返回i*250}）
.attr（“宽度”，函数（d）{
返回xScale（d[“总计]）；
});
setTimeout（函数（）{
d3.selectAll（“rect”）.transition（）
.持续时间（500）
.delay（函数（d，i）{return 250*（3-i）；}）
.attr（“宽度”，函数（d）{返回0；}）
},2000);
//定义响应行为
函数resize（）{
var width=parseInt（d3.select（#chart”）.style（“width”））-margin.left-margin.right，
height=parseInt（d3.select（#chart”）.style（“height”））-margin.top-margin.bottom；
//使用新的宽度/高度更新比例范围
X刻度范围（[0，宽度]）；
Y刻度范围圆带（[高度，0]，0.1）；
//使用新比例更新轴和文字
svg.select（“.x.axis”）
.呼叫（xAxis）
.attr（“变换”、“平移（0）”、“高度+”）
.选择（“.标签”）
.attr（“变换”、“平移”（+width/2+）、“+margin.bottom/1.5+”）；
svg.选择（“y轴”）
.呼叫（yAxis）；
//更新勾号
xAxis.ticks（数学最大值（宽度/75,2），“$”；
//强制D3重新计算并更新该行
svg.selectAll（“.bar”）
.attr（“宽度”，函数（d）{return xScale（d[“total”]）；}）
.attr（“y”，函数（d）{return yScale（d[“Name”]）；}）
.attr（“高度”，yScale.rangeBand（））；
};
//每当发生调整大小事件时，调用resize函数
d3.选择（窗口）。打开（'resize'，resize）；
//调用resize函数
调整大小（）；
//定义格式函数
函数格式（d）{
d、 总计=+d.总计；
返回d；
}

@导入url(https://fonts.googleapis.com/css?family=Karla);正文{font-family:Karla！important}.bar{fill:#c7003b}.bar:hover{fill:#61001d}.axis{font-size:10px}.axis-line.axis-path{fill:none；stroke:#D4D8DA；stroke-width:1px；形状渲染：crispEdges}.x路径{display:none}图表}宽度：100%；高度：100%；位置：绝对}.d3-tip{行高：1；字体大小：14px；背景：14px.0,0；颜色：#b9b9b9；边框半径：2px}

需要在我已有的基础上进行构建-但也保留一些动画属性，并根据wireframesure在条形图上方使用标签对其进行重新建模-但其未设置动画且与新的design@TheOldCounty你可以试试这样的。是否希望动画每x秒应用一次？上面的代码应该很有用。你有一个反应灵敏的水平条形图。从第二段代码（甚至是带有动画的JSFIDLE）中，您可以获取动画所需的元素（延迟是包含的标记之一）design@TheOldCounty小部件现在拥有了一切。您可以调整它：）

   var data = [{
            "name": "Apples",
            "value": 20,
    },
        {
            "name": "Bananas",
            "value": 12,
    },
        {
            "name": "Grapes",
            "value": 19,
    },
        {
            "name": "Lemons",
            "value": 5,
    },
        {
            "name": "Limes",
            "value": 16,
    },
        {
            "name": "Oranges",
            "value": 26,
    },
        {
            "name": "Pears",
            "value": 30,
    }];

    //sort bars based on value
    data = data.sort(function (a, b) {
        return d3.ascending(a.value, b.value);
    })

    //set up svg using margin conventions - we'll need plenty of room on the left for labels
    var margin = {
        top: 15,
        right: 25,
        bottom: 15,
        left: 60
    };

    var width = 960 - margin.left - margin.right,
        height = 500 - margin.top - margin.bottom;

    var svg = d3.select("#graphic").append("svg")
        .attr("width", width + margin.left + margin.right)
        .attr("height", height + margin.top + margin.bottom)
        .append("g")
        .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

    var x = d3.scale.linear()
        .range([0, width])
        .domain([0, d3.max(data, function (d) {
            return d.value;
        })]);

    var y = d3.scale.ordinal()
        .rangeRoundBands([height, 0], .3)
        .domain(data.map(function (d) {
            return d.name;
        }));

    //make y axis to show bar names
    var yAxis = d3.svg.axis()
        .scale(y)
        //no tick marks
        .tickSize(0)
        .orient("right");

    var gy = svg.append("g")
        .attr("class", "y axis")
        .call(yAxis)

    var bars = svg.selectAll(".bar")
        .data(data)
        .enter()
        .append("g")
        .attr("class", "bars")


    //append rects
    bars.append("rect")
        .attr("class", "bar")
        .attr("y", function (d) {
            return y(d.name);
        })
        .attr("height", y.rangeBand())
        .attr("x", 0)
        .attr("width", function (d) {
            return x(d.value);
        });

    //add a value label to the right of each bar
    bars.append("text")
        .attr("class", "label")
        //y position of the label is halfway down the bar
        .attr("y", function (d) {
            return y(d.name) + y.rangeBand() / 2 + 4;
        })
        //x position is 3 pixels to the right of the bar
        .attr("x", function (d) {
            return x(d.value) + 3;
        })
        .text(function (d) {
            return d.value;
        });

    var labels =         
        bars.append("text")
        .attr("class", "labels")
    .attr("y", function (d) {
            return y(d.name) + y.rangeBand() / 2 - 30;
        })
    .attr("x", 0)
        .text(function (d) {
            return d.name;
        });

   var data = [{
            "name": "Apples",
            "value": 20,
    },
        {
            "name": "Bananas",
            "value": 12,
    },
        {
            "name": "Grapes",
            "value": 19,
    },
        {
            "name": "Lemons",
            "value": 5,
    },
        {
            "name": "Limes",
            "value": 16,
    },
        {
            "name": "Oranges",
            "value": 26,
    },
        {
            "name": "Pears",
            "value": 30,
    }];

    //sort bars based on value
    data = data.sort(function (a, b) {
        return d3.ascending(a.value, b.value);
    })

    //set up svg using margin conventions - we'll need plenty of room on the left for labels
    var margin = {
        top: 15,
        right: 25,
        bottom: 15,
        left: 60
    };

    var width = 960 - margin.left - margin.right,
        height = 500 - margin.top - margin.bottom;

    var svg = d3.select("#graphic").append("svg")
        .attr("width", width + margin.left + margin.right)
        .attr("height", height + margin.top + margin.bottom)
        .append("g")
        .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

    var x = d3.scale.linear()
        .range([0, width])
        .domain([0, d3.max(data, function (d) {
            return d.value;
        })]);

    var y = d3.scale.ordinal()
        .rangeRoundBands([height, 0], .1)
        .domain(data.map(function (d) {
            return d.name;
        }));

    //make y axis to show bar names
    var yAxis = d3.svg.axis()
        .scale(y)
        //no tick marks
        .tickSize(0)
        .orient("left");

    var gy = svg.append("g")
        .attr("class", "y axis")
        .call(yAxis)

    var bars = svg.selectAll(".bar")
        .data(data)
        .enter()
        .append("g")

    //append rects
    bars.append("rect")
        .attr("class", "bar")
        .attr("y", function (d) {
            return y(d.name);
        })
        .attr("height", y.rangeBand())
        .attr("x", 0)
        .attr("width", function (d) {
            return x(d.value);
        });

    //add a value label to the right of each bar
    bars.append("text")
        .attr("class", "label")
        //y position of the label is halfway down the bar
        .attr("y", function (d) {
            return y(d.name) + y.rangeBand() / 2 + 4;
        })
        //x position is 3 pixels to the right of the bar
        .attr("x", function (d) {
            return x(d.value) + 3;
        })
        .text(function (d) {
            return d.value;
        });