在d3.js中更改发散条形图的集成按钮？_D3.js

在d3.js中更改发散条形图的集成按钮？

d3.js

在d3.js中更改发散条形图的集成按钮？,d3.js,D3.js,我是D3的新手，尝试创建一个带有更新按钮的发散条形图。我在修改别人的代码方面走了这么远，但似乎在某个地方破坏了它代码如下： `<style> body { margin:0; position:fixed; top:0; right:0; bottom:0; left:0; } body { font-family: Arial; } .y-axis line{ stroke: black; } .annual-growth { fill: black; }

我是D3的新手，尝试创建一个带有更新按钮的发散条形图。我在修改别人的代码方面走了这么远，但似乎在某个地方破坏了它

代码如下：

`<style>
 body { margin:0; position:fixed; top:0; right:0; bottom:0; left:0; }

 body {
   font-family: Arial;
}

.y-axis line{
  stroke: black;
}

.annual-growth {
  fill: black;
}

.bar-label, .x-axis {
  font-size: 8px;
}

.domain, .tick line {
  opacity: 0.5;
}

`
正文{边距：0；位置：固定；顶部：0；右侧：0；底部：0；左侧：0；}
身体{
字体系列：Arial；
}
.y轴线{
笔画：黑色；
}
.年增长率{
填充：黑色；
}
.bar标签，.x轴{
字号：8px；
}
.domain，.tick行{
不透明度：0.5；
}


男性
女性
var-margin={顶部：40，右侧：50，底部：60，左侧：50}；
变量宽度=600-margin.left-margin.right，
高度=600-margin.top-margin.bottom；
var svg=d3.选择（“正文”）.追加（“svg”）
.attr（“宽度”，宽度+边距。左侧+边距。右侧）
.attr（“高度”，高度+边距。顶部+边距。底部）
.附加（“g”）
.attr（“转换”、“平移”（+margin.left+）、“+margin.top+”）；
//配置
var cfg={
labelMargin:5，
边距:10,，
legendRightMargin:0
}
var x=d3.scaleLinear（）
.范围（[0，宽度]）；
var color=d3.scaleSequential（）.domain（[1,10]）
.插值器（d3.插值器）；
变量y=d3.scaleBand（）
.范围（[高度，20]）
.填充（0.15）；
函数解析（d）{
d、 秩=+d.rank；
d、 [selectedVar]=+d[selectedVar]；
返回d；
}
var legend=svg.append（“g”）
.attr（“类别”、“图例”）；
图例。追加（“文本”）
.attr（“x”，宽度-cfg.legendRightMargin）
.attr（“文本锚定”、“结束”）
.文本（“种族”）；
图例。追加（“文本”）
//为给定变量创建/更新绘图的函数：
函数更新（selectedVar）{
.attr（“x”，宽度-cfg.legendRightMargin）
.attr（“y”，18）
.attr（“文本锚定”、“结束”）
.样式（“不透明度”，0.5）
.文本（“发病率（每100000人）”；
//为给定变量创建/更新绘图的函数：
函数更新（selectedVar）{
d3.csv（“https://raw.githubusercontent.com/apexmedicine/D3/master/demographics7.csv“，解析，
函数（错误、数据）{
如果（错误）抛出错误；
y、 域（data.map（函数（d）{returnd.Group；}））；
x、 域（d3.extent（数据，函数（d）{returnd.[selectedVar]；}））；
var max=d3.max（数据，函数（d）{返回d.[selectedVar]；}）；
颜色域（[-max，max]）；
var yAxis=svg.append（“g”）
.attr（“类”、“y轴”）
.attr（“转换”、“转换”（+x（0）+”，80）”）
.附加（“行”）
.attr（“y1”，0）
.attr（“y2”，高度）；
var xAxis=svg.append（“g”）
.attr（“类”、“x轴”）
.attr（“变换”、“平移（0）”+（高度+cfg.xAxisMargin）+”）
.call（d3.axisBottom（x.ticksizeout（0））；
//变量u：将数据映射到现有条形图
var u=svg.selectAll（“rect”）
.数据（数据）
//更新栏
U
.输入（）
.append（“rect”）
.合并（u）
.transition（）
.持续时间（1000）
.attr（“x”，函数（d）{返回x（d.Group）；}）
.attr（“y”，函数（d）{返回y（d[selectedVar]）；}）
.attr（“宽度”，x.带宽（））
.attr（“height”，函数（d）{返回高度-y（d[selectedVar]）；}）
.attr（“填充”，“#69b3a2”）
var labels=svg.append（“g”）
.attr（“类别”、“标签”）；
标签。选择全部（“文本”）
.数据（数据）
.enter（）.append（“文本”）
.attr（“类别”、“条形标签”）
.attr（“x”，x（0））
.attr（“y”，函数（d）{返回y（d.Group）}）
.attr（“dx”，函数（d）{
返回d组<0？cfg.labelMargin:-cfg.labelMargin；
})
.attr（“dy”，y.bandwidth（））
.attr（“文本锚定”，函数（d）{
返回d[selectedVar]<0？“开始”：“结束”；
})
.text（函数（d）{return d.Group}）
.样式（“填充”，功能（d）{
如果（d.ethnicity==“黑色”）{
返回“蓝色”；
}
});
});
}  
//初始化绘图
更新（'var1'）
`

我想让它看起来像这样：

我已经尝试了好几天了-有人能帮忙吗？我需要添加/更改/删除什么

谢谢大家！

我已经更改了部分代码，使其正常工作，但功能不完善

使用点符号或括号符号，但不能同时使用两者

parse（）


对于建筑矩形，误用了x（）
和y（）
，宽度与值相关，高度与y.带宽（）相关。
这是一个例子，可能不完全适合你的需要，但你可以做更多的编辑，以得到你想要的


男性
女性
var-margin={顶部：40，右侧：50，底部：60，左侧：50}；
变量宽度=600-margin.left-margin.right，
高度=600-margin.top-margin.bottom；
var svg=d3.选择（“正文”）.追加（“svg”）
.attr（“宽度”，宽度+边距。左侧+边距。右侧）
.attr（“高度”，高度+边距。顶部+边距。底部）
.附加（“g”）
.attr（“转换”、“平移”（+margin.left+）、“+margin.top+”）；
//配置
var cfg={
labelMargin:5，
边距:10,，
legendRightMargin:0
}
var x=d3.scaleLinear（）
.范围（[0，宽度]）；
var color=d3.scaleSequential（）.domain（[1,10]）
.插值器（d3.插值器）；
变量y=d3.scaleBand（）
.范围（[高度，20]）
.填充（0.15）；
函数解析（d）{
d、 秩=+d.rank；
d、 var1=+d.var1；
d、 var2=+d.var2；
返回d；
}
var legend=svg.append（“g”）
.attr（“类别”、“图例”）；
图例。追加（“文本”）
.attr（“x”，宽度-cfg.legendRightMargin）
.attr（“文本锚定”、“结束”）
.文本（“种族”）；
图例。追加（“文本”）
//为给定变量创建/更新绘图的函数：
.attr（“x”，宽度-cfg.legendRightMargin）
.attr（“y”，18）
.attr（“文本锚定”、“结束”）
.样式（“不透明度”，0.5）
.文本（“发病率（每100000人）”；
//为给定变量创建/更新绘图的函数：
var yAxis=svg.append（“g”）
.attr（“类”、“y轴”）
var xAxis=svg.append（“g”）
.attr（“类”、“x轴”）；
var labels=svg.append（“g”）
.attr（“类”、“标签”
<body>

<!-- Add 2 buttons -->
<button onclick="update('var1')">Male</button>
<button onclick="update('var2')">Female</button>

<!-- Create a div where the graph will take place -->
<div id="my_dataviz"></div>

<script>
var margin = {top: 40, right: 50, bottom: 60, left: 50};

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

var svg = d3.select("body").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 + ")");

// Config
var cfg = {
  labelMargin: 5,
  xAxisMargin: 10,
  legendRightMargin: 0
}

var x = d3.scaleLinear()
    .range([0, width]);

var colour = d3.scaleSequential().domain([1,10])
.interpolator(d3.interpolatePuRd);

var y = d3.scaleBand()
    .range([height, 20])
    .padding(0.15);

function parse(d) {
  d.rank = +d.rank;
  d.[selectedVar] = +d.[selectedVar];
  return d;
}

var legend = svg.append("g")
    .attr("class", "legend");

legend.append("text")
    .attr("x", width - cfg.legendRightMargin)
    .attr("text-anchor", "end")
    .text("Ethnicity");

legend.append("text")
// A function that create / update the plot for a given variable:
function update(selectedVar) {
  .attr("x", width - cfg.legendRightMargin)
    .attr("y", 18)
    .attr("text-anchor", "end")
    .style("opacity", 0.5)
    .text("Incidence(Per 100,000)");

// A function that create / update the plot for a given variable:
function update(selectedVar) {

d3.csv("https://raw.githubusercontent.com/apexmedicine/D3/master/demographics7.csv", parse, 
function(error, data) {
  if (error) throw error;
  
  y.domain(data.map(function(d) { return d.Group; }));
  x.domain(d3.extent(data, function(d) { return d.[selectedVar]; }));
  
  var max = d3.max(data, function(d) { return d.[selectedVar]; });
  colour.domain([-max, max]);
  
  var yAxis = svg.append("g")
    .attr("class", "y-axis")
    .attr("transform", "translate(" + x(0) + ",80)")
    .append("line")
      .attr("y1", 0)
      .attr("y2", height);
  
  var xAxis = svg.append("g")
    .attr("class", "x-axis")
    .attr("transform", "translate(0," + (height + cfg.xAxisMargin) + ")")
    .call(d3.axisBottom(x).tickSizeOuter(0));
  
// variable u: map data to existing bars
var u = svg.selectAll("rect")
  .data(data)

// update bars
u
  .enter()
  .append("rect")
  .merge(u)
  .transition()
  .duration(1000)
    .attr("x", function(d) { return x(d.Group); })
    .attr("y", function(d) { return y(d[selectedVar]); })
    .attr("width", x.bandwidth())
    .attr("height", function(d) { return height - y(d[selectedVar]); })
    .attr("fill", "#69b3a2")

  var labels = svg.append("g")
    .attr("class", "labels");
  
  labels.selectAll("text")
    .data(data)
  .enter().append("text")
    .attr("class", "bar-label")
    .attr("x", x(0))
    .attr("y", function(d) { return y(d.Group )})
    .attr("dx", function(d) {
        return d.Group < 0 ? cfg.labelMargin : -cfg.labelMargin;
    })
    .attr("dy", y.bandwidth())
    .attr("text-anchor", function(d) {
        return d[selectedVar] < 0 ? "start" : "end";
    })
    .text(function(d) { return d.Group })
    .style("fill", function(d) {
         if (d.Ethhnicity == "Black") {
         return "blue";
       }
    });
    
});
}  

// Initialize plot
update('var1')

</script>
</body>` 

// not
d[selectedVar] = +d.[selectedVar];
// use
d[selectedVar] = +d[selectedVar];

function parse(d) {
  d.rank = +d.rank;
  d.var1 = +d.var1;
  d.var2 = +d.var2;
  return d;
}