Javascript D3js图表响应

我正在尝试得到响应的d3js图表。我已经将图表的宽度和高度设置为100%，因为它有一个调整大小的功能，可以减小大小。到目前为止，我所做的只是设法减少x轴上的标签，但折线图仍然保持相同的大小。我试图使响应的方式是正确的还是更好的方式使任何d3js图表（条形图/饼图/直线）响应

var保证金={
前30名，
右:20,，
底数：30，
左：50
};
var width=parseInt（d3.select（#chart”）.style（“width”））-margin.left-margin.right，
height=parseInt（d3.select（#chart”）.style（“height”））-margin.top-margin.bottom；
var x=d3.scale.ordinal（）
.rangeRoundBands（[0，宽度]，.1）；
变量y=d3.scale.linear（）.range（[height，0]）；
var xAxis=d3.svg.axis（）.scale（x）
.orient（“底部”）.ticks（5）.tickFormat（函数（d）{
退换货（“季节性”或“季节性”）；
});;
var yAxis=d3.svg.axis（）.scale（y）
.方向（“左”）。勾号（5）；
var valueline=d3.svg.line（）
.x（功能（d）{
返回x（d.name）；
})
.y（功能（d）{
返回y（d.count）；
});
var svg=d3.选择（“主体”）
.append（“svg”）
.attr（“宽度”，宽度+边距。左侧+边距。右侧）
.attr（“高度”，高度+边距。顶部+边距。底部）
.附加（“g”）
.attr（“转换”、“平移”（+margin.left+）、“+margin.top+”）；
//获取数据
var all=[{
“名称”：“季节流行”，
“代码”：“季节流行”，
“儿童”：[{
“名称”：“季节性”，
“代码”：“季节性”，
“计数”：1200
}, {
“名称”：“季节性”，
“代码”：“季节性”，
“计数”：2000
}, {
“名称”：“季节性”，
“代码”：“季节性_LYQ3”，
“计数”：1060
}, {
“名称”：“季节性”，
“代码”：“季节性第四季度”，
“计数”：2300
}, {
“名称”：“季节性”，
“代码”：“季节性”，
“计数”：1300
}, {
“名称”：“季节性”，
“代码”：“季节性”，
“计数”：3400
}, {
“名称”：“季节性”，
“代码”：“季节性”，
“计数”：4500
}, {
“名称”：“季节性”，
“代码”：“季节性”，
“计数”：5500
}]
}];
var data=all[0]。子项；
data.forEach（函数（d）{
//d.名称=+d.日期；
d、 计数=+d.count；
});
//缩放数据的范围
x、 域（data.map）（函数（d）{
返回d.name；
}));
y、 域（[0，d3.max（数据，函数（d））{
返回d.count；
})]);
append（“path”）//添加valueline路径。
.attr（“d”，valueline（数据））；
svg.append（“g”）//添加X轴
.attr（“类”、“x轴”）
.attr（“变换”、“平移（0）”、“高度+”）
.呼叫（xAxis）；
svg.append（“g”）//添加Y轴
.attr（“类”、“y轴”）
.呼叫（yAxis）；
//定义响应行为
函数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]）；
//使用新比例更新轴和文字
svg.select（“.x.axis”）
.attr（“变换”、“平移（0）”、“高度+”）
.呼叫（xAxis）；
svg.select（“.y.axis”）
.呼叫（yAxis）；
//强制D3重新计算并更新该行
svg.selectAll（“.line”）
.attr（“d”，函数（d）{返回行（d.count）；}）；
//更新勾号
X轴刻度（数学最大值（宽度/75,2））；
yAxis.ticks（数学最大值（高度/50,2））；
};
//每当发生调整大小事件时，调用resize函数
d3.选择（窗口）。打开（'resize'，resize）；
//调用resize函数
调整大小（）
正文{
字体：12px Arial；
}
路径{
笔画：钢蓝；
笔画宽度：2；
填充：无；
}
.轴路径，.轴线{
填充：无；
笔画：灰色；
笔画宽度：1；
形状渲染：边缘清晰；
}
#图表{
宽度：100%；
身高：100%；
位置：绝对位置；
}
您的代码可以正常工作。省得你和两个SVG打交道。在id=“chart”的页面上显示，并附加此图标

var svg = d3.select("body")
    .append("svg")

但这并不是D3的问题，更多的是与反应灵敏的SVG有关。响应图表在缩放方面存在问题。X轴和Y轴可能会被误解

一种方法是缩放整个图表/SVG。忘记侦听窗口大小调整事件。只需在主svg上设置一个
viewBox
属性。设置一个静态宽度上限，这也是你聊天的正确比例

var svg = d3.select("#chart")
    .attr("viewBox", "0 0 " + viewWidth + " " + viewHeight)

例子

var保证金={
前30名，
右:20,，
底数：30，
左：50
};
变量宽度=500-margin.left-margin.right，
高度=240-margin.top-margin.bottom；
var x=d3.scale.ordinal（）
.rangeRoundBands（[0，宽度]，.1）；
变量y=d3.scale.linear（）.range（[height，0]）；
var xAxis=d3.svg.axis（）.scale（x）
.orient（“底部”）.ticks（5）.tickFormat（函数（d）{
退换货（“季节性”或“季节性”）；
});;
var yAxis=d3.svg.axis（）.scale（y）
.方向（“左”）。勾号（5）；
var valueline=d3.svg.line（）
.x（功能（d）{
返回x（d.name）；
})
.y（功能（d）{
返回y（d.count）；
});
var viewWidth=width-margin.left-margin.right；
var viewHeight=高度+margin.top+margin.bottom；
var svg=d3。选择（“图表”）
.attr（“视图框”、“0 0”+视图宽度+“”+视图高度）
//获取数据
var all=[{