d3.js如何使用垂直x轴标签绘制折线图

d3.js如何使用垂直x轴标签绘制折线图

我的小提琴：

更新
我有几个问题，
1.如何在bootstrap（即无硬编码宽度和高度）中使此图响应
2.如何在单击按钮时更新此图表

---

3.如何将y轴从0开始设置为任何值，例如0到9100：要更改标签旋转，只需选择所有文本元素并通过

transform

属性应用旋转，然后使用

dx

和

dy

调整位置，另外，如果您注意到我更改了

margin

变量中的padding bottom值，以便能够查看勾号文本，因为这将使它们在旋转时半可见

...
svg.append("g")
  .attr("transform", "translate(0," + height + ")")
  .call(d3.axisBottom(x))
  .selectAll("text")    
    .style("text-anchor", "end")
    .attr("dx", "-.8em")
    .attr("dy", "-.5em")
    .attr("transform", "rotate(-90)");
...

或工作片段：

//设置图形的尺寸和边距
var margin={顶部：10，右侧：30，底部：60，左侧：60}，
宽度=460-margin.left-margin.right，
高度=400-边距。顶部-边距。底部-45；
//将svg对象附加到页面主体
var svg=d3。选择（“我的数据维”）
.append（“svg”）
.attr（“宽度”，宽度+边距。左侧+边距。右侧）
.attr（“高度”，高度+边距。顶部+边距。底部）
.附加（“g”）
.attr（“转换”，
“翻译（“+margin.left+”，“+margin.top+”）；
//读取数据
d3.csv（“https://raw.githubusercontent.com/holtzy/D3-graph-gallery/master/DATA/connectedscatter.csv",
//读取csv时，我必须格式化变量：
职能（d）{
返回{date:d3.timeParse（“%Y-%m-%d”）（d.date），值：d.value}
},
//现在我可以使用此数据集：
功能（数据）{
//添加X轴-->它是一种日期格式
var x=d3.scaleTime（）
.domain（d3.extent（数据，函数（d）{返回d.date；}））
.范围（[0，宽度]）；
svg.append（“g”）
.attr（“变换”、“平移（0）”、“高度+”）
.call（d3.axisBottom（x））
.selectAll（“文本”）
.style（“文本锚定”、“结束”）
.attr（“dx”，“-.8em”）
.attr（“dy”，“-.5em”）
.attr（“变换”、“旋转（-90）”）；
//添加Y轴
变量y=d3.scaleLinear（）
.domain（[8000，9200]）
.范围（[高度，0]）；
svg.append（“g”）
.呼叫（d3.左（y））
//添加行
追加（“路径”）
.基准（数据）
.attr（“填充”、“无”）
.attr（“笔划”，“#69b3a2”）
.attr（“笔划宽度”，1.5）
.attr（“d”，d3.line（）
.x（函数（d）{返回x（d.date）}）
.y（函数（d）{返回y（d.value）}）
)
//加分
svg
.附加（“g”）
.selectAll（“点”）
.数据（数据）
.输入（）
.附加（“圆圈”）
.attr（“cx”，函数（d）{return x（d.date）}）
.attr（“cy”，函数（d）{返回y（d.value）}）
.attr（“r”，5）
.attr（“填充”，“#69b3a2”）
})

您能详细说明您的问题吗？一个可重复使用的代码片段将有助于解决您的问题。我会在几小时内检查您的请求，一旦我有时间！不，我想调整x轴标签旋转90度，即4月15日星期六等等。谢谢，我有几个问题，

1.

如何使此图形在bootstrap ie中响应，而无需硬编码宽度和高度

2.

如何在按钮上更新此图形单击

3.

如何将y轴从0开始到任何值，例如0到9100如果您对我的答案投赞成票，我将与您一起为您更新：P！！开玩笑的是，有一种方法可以将其作为接受新值的函数，一旦有了新数据，您就可以重新运行该函数来重新绘制图表，也可以让一个窗口大小的侦听器在容器大小更改时重新绘制图表。@Nitensawant，我更新了我的答案！请检查，我希望这将帮助你！！

...
svg.append("g")
  .attr("transform", "translate(0," + height + ")")
  .call(d3.axisBottom(x))
  .selectAll("text")    
    .style("text-anchor", "end")
    .attr("dx", "-.8em")
    .attr("dy", "-.5em")
    .attr("transform", "rotate(-90)");
...