Javascript 响应D3屏幕大小直方图

我已经使D3柱状图看起来有响应性，但我希望它在任何屏幕（div）大小上都能100%响应。我认为这样做的目的是计算父div的对角线，并使用它相应地更改轴长度。在下面的例子中，上述想法计算水平尺寸，但我无法让它识别垂直长度，这会弄乱水平尺寸

var color=“钢蓝”；
//使用平均值为20、偏差为5的正态分布生成1000个数据点
var值=d3.范围（1000）.映射（d3.随机.正常（20,5））；
//变量值={data}
//计数的格式化程序。
var formatCount=d3.format（“，.0f”）；
var保证金={
前30名，
右:5,，
底数：20，
左：5
},
width=parseInt（d3.select（“#histog”）.style（“width”））-margin.left-margin.right
高度=275-margin.top-margin.bottom；
var max=d3.max（值）；
var min=d3.min（数值）；
var x=d3.scale.linear（）
.domain（[min，max]）
.范围（[0，宽度]）；
//使用20个均匀间隔的容器生成直方图。
var data=d3.layout.histogram（）
.垃圾箱（x.ticks（20））
（价值观）；
var yMax=d3.max（数据，函数（d）{
返回d.length
});
变量yMin=d3.min（数据，函数（d）{
返回d.length
});
var colorScale=d3.scale.linear（）
.domain（[yMin，yMax]）
.range（[d3.rgb（color）.brighter（），d3.rgb（color）.darder（）]）；
变量y=d3.scale.linear（）
.domain（[0，yMax]）
.范围（[高度，0]）；
var xAxis=d3.svg.axis（）
.比例（x）
.东方（“博科托姆”）；
var svg=d3.选择（#histog”）.追加（“svg”）
.attr（“宽度”、“100%”）
.attr（“高度”、“26vh”）
.附加（“g”）
.attr（“转换”、“平移”（+margin.left+）、“+margin.top+”）；
var bar=svg.selectAll（“.bar”）
.数据（数据）
.enter（）.append（“g”）
.attr（“类”、“条”）
.attr（“转换”，函数（d）{
返回“translate”（“+x（d.x）+”，“+y（d.y）+”）；
});
附加条（“rect”）
.attr（“x”，1）
.attr（“宽度”，（x（数据[0].dx）-x（0））-1）
.attr（“高度”，功能（d）{
返回高度-y（d.y）；
})
.attr（“填充”，功能（d）{
返回色标（d.y）
});
附加条（“文本”）
.attr（“dy”，“.75em”）
.attr（“y”，-12）
.attr（“x”，（x（数据[0].dx）-x（0））/2）
.attr（“文本锚定”、“中间”）
.文本（功能（d）{
返回格式计数（d.y）；
});
svg.append（“g”）
.attr（“类”、“x轴”）
.attr（“变换”、“平移（0）”、“高度+”）
.呼叫（xAxis）；
/*
*添加刷新方法以重新加载新数据
*/
函数刷新（值）{
//var值=d3.范围（1000）.映射（d3.随机.正常（20,5））；
var data=d3.layout.histogram（）
.垃圾箱（x.ticks（20））
（价值观）；
//使用新数据重置y域
var yMax=d3.max（数据，函数（d）{
返回d.length
});
变量yMin=d3.min（数据，函数（d）{
返回d.length
});
y、 域（[0，yMax]）；
var colorScale=d3.scale.linear（）
.domain（[yMin，yMax]）
.range（[d3.rgb（color）.brighter（），d3.rgb（color）.darder（）]）；
var bar=svg.selectAll（“.bar”）.data（数据）；
//删除包含数据的对象
bar.exit（）.remove（）；
bar.transition（）
.持续时间（1000）
.attr（“转换”，函数（d）{
返回“translate”（“+x（d.x）+”，“+y（d.y）+”）；
});
选择条（“rect”）
.transition（）
.持续时间（1000）
.attr（“高度”，功能（d）{
返回高度-y（d.y）；
})
.attr（“填充”，功能（d）{
返回色标（d.y）
});
条。选择（“文本”）
.transition（）
.持续时间（1000）
.文本（功能（d）{
返回格式计数（d.y）；
});
}

.histocontainer{
浮动：对；
宽度：55%；
右边距：自动；
左边距：自动；
文本对齐：顶部；
}
@介质（最小宽度：576px）{
.组织容器{
最大宽度：540像素；
}
}
@介质（最小宽度：768px）{
.组织容器{
最大宽度：720px；
}
}
@介质（最小宽度：992px）{
.组织容器{
最大宽度：960像素；
}
}
@介质（最小宽度：1200px）{
.组织容器{
最大宽度：1140px；
}
}
#鳞片{
宽度：20%；
}

---

我简化了示例，并使用了

刷新

函数的结构来创建一个

调整大小

函数。我使用它来检测大小调整并触发函数

所有可以在不知道宽度和高度的情况下完成的工作，我在函数外部完成，在函数内部，我只是重新绘制了箱子和轴

这都是你的代码，我只是稍微移动了一下

var color=“钢蓝”；
//使用平均值为20、偏差为5的正态分布生成1000个数据点
var值=d3.范围（1000）.映射（d3.随机.正常（20,5））；
//计数的格式化程序。
var formatCount=d3.format（“，.0f”）；
var保证金={
前30名，
右:5,，
底数：20，
左：5
};
var max=d3.max（值）；
var min=d3.min（数值）；
var x=d3.scale.linear（）
.域（[min，max]）；
var data=d3.layout.histogram（）
.垃圾箱（x.ticks（20））
（价值观）；
var yMax=d3.max（数据，函数（d）{
返回d.length
});
变量yMin=d3.min（数据，函数（d）{
返回d.length
});
var colorScale=d3.scale.linear（）
.domain（[yMin，yMax]）
.range（[d3.rgb（color）.brighter（），d3.rgb（color）.darder（）]）；
变量y=d3.scale.linear（）
.域（[0，yMax]）；
var xAxis=d3.svg.axis（）
.比例（x）
.东方（“底部”）；
var svg=d3.选择（“svg”）
.附加（“g”）
.attr（“转换”、“平移”（+margin.left+）、“+margin.top+”）；
svg.append（“g”）
.attr（“类”、“x轴”）；
函数resize（）{
var rect=d3.select（'svg'）.node（）.getBoundingClientRect（）；
var width=rect.width-margin.left-margin.right；
var height=Math.min（rect.height，window.innerHeight）-margin.top-margin.bottom；
x、 范围（[0，宽度]）；
y、 范围（[高度，0]）；
//重新定位元素
svg.select（'x.axis'）
.attr（“变换”、“平移（0）”、“高度+”）
.呼叫（xAxis）；
var bar=svg.selectAll（“.bar”）.data（数据）；
//删除包含数据的对象
bar.exit（）.remove（）；
var newbar=bar.enter（）
.附加（“g”）
.attr（“类别”、“酒吧”）；
newbar.append（“rect”）
.attr（“x”，1）；
newbar.te