Javascript D3.js结合烛台图和折线图

我试图在烛台图上绘制移动平均线，但“路径”并没有完全显示在我创建的svg画布上。 我试着看了几篇关于如何在条形图上画一条线的帖子（因为我认为这会很相似），但都没有成功

下面是我看过的几个例子和帖子：

我有一个数组中的所有数据

我对蜡烛棒图和移动平均线（直线）使用相同的x“刻度”。我试过在线条和烛台上使用相同的y“刻度”，但都不起作用。因此，我尝试为y创建两个刻度，一个用于移动平均线，一个用于烛台图。这就是我在下面代码中所做的

<script src="https://d3js.org/d3.v4.min.js"></script>
<script type="text/javascript">
var twoHundredDayCandleStickChart = [];

//pulling from 2 properties so must do this way
@for (int i = 0; i != 100; ++i)
    {
        @:twoHundredDayCandleStickChart.push({date: '@Model.DailyTimeSeriesData.Data.ElementAt(i).Key', high: '@Model.DailyTimeSeriesData.Data.ElementAt(i).Value.high', low: '@Model.DailyTimeSeriesData.Data.ElementAt(i).Value.low', open: '@Model.DailyTimeSeriesData.Data.ElementAt(i).Value.open', close: '@Model.DailyTimeSeriesData.Data.ElementAt(i).Value.close', sma: '@Model.TwoHundredDaySma.Data.ElementAt(i).Value.Sma'})
    }

console.log(twoHundredDayCandleStickChart);

    var width = 900;
    var height = 500;
    var margin = 50;

    function min(a, b) { return a < b ? a : b; }

    function max(a, b) { return a > b ? a : b; }

    //y for the candlestick
    var y = d3.scaleLinear().range([height - margin, margin]);

    var x = d3.scaleTime().range([margin, width - margin]);

    //y for the line
    var y1 = d3.scaleLinear().range([height - margin, margin]);

    //line for the sma
    var line1 = d3.line()
        .x(function (d) { return x(d["date"]); })
        .y(function (d) { return y(d["sma"]); });

    function buildChart(data) {

        data.forEach(function (d) {
            d.date = new Date(d.date);
            d.high = +d.high;
            d.low = +d.low;
            d.open = +d.open;
            d.close = +d.close;
            d.sma = +d.sma;
        });

    var chart = d3.select("#twoHundredDaySmaWithCandleStickChart")
        .append("svg")
        .attr("class", "chart")
        .attr("width", width)
        .attr("height", height);

    //map is going to create an array with all the lows and then d3.min will take the min out of all of them
    y.domain([d3.min(data.map(function (x) { return x["low"]; })), d3.max(data.map(function (x) { return x["high"]; }))])

    x.domain(d3.extent(data, function (d) { return d["date"]; }))

    y1.domain(d3.extent(68, d3.max(data, function (d) { return d["sma"]; })))


    //grid for the chart; x and y axis
    chart.selectAll("line.x")
        .data(x.ticks(10))
        .enter().append("line")
        .attr("class", "x")
        //.text(String)
        .attr("x1", x)
        .attr("x2", x)
        .attr("y1", margin)
        .attr("y2", height - margin)
        .attr("stroke", "#ccc");
    chart.selectAll("line.y")
        .data(y.ticks(10))
        .enter().append("line")
        .attr("class", "y")
        .attr("x1", margin)
        .attr("x2", width - margin)
        .attr("y1", y)
        .attr("y2", y)
        .attr("stroke", "#ccc");


    //x axis
    chart.append("g")
        .attr("transform", "translate(0," + 450 + ")") //need to change this 450 to a variable- it is how far down the axis will go
        .attr("class", "xrule")   // give it a class so it can be used to select only xaxis labels  or change color
        //the x axis                        
        .call(d3.axisBottom(x))
        .selectAll("text")
        .style("text-anchor", "end")
        .attr("dx", "-.8em")
        .attr("dy", ".15em")
        .attr("transform", function (d) {
        return "rotate(-65)"
        });

    //the y axis
    chart.selectAll("text.yrule")
        .data(y.ticks(10))
        .enter()
        .append("text")
        .attr("class", "yrule")
        .attr("x", 0)
        .attr("y", y)
        .attr("dy", 0)
        .attr("dx", 20)
        .attr("text-anchor", "middle")
        .text(String);

    //add rectangles- if open higher then close then red
    chart.selectAll("rect")
        .data(data)
        .enter().append("rect")
        .attr("x", function (d) { return x(d["date"]); })
        .attr("y", function (d) { return y(max(d["open"], d["close"])); })
        .attr("height", function (d) { return y(min(d["open"], d["close"])) - y(max(d["open"], d["close"])); })
        .attr("width", function (d) { return 0.5 * (width - 2 * margin) / data.length; })
        .attr("fill", function (d) { return d["open"] > d["close"] ? "red" : "green"; });

    //add a stem to the rectangle
    chart.selectAll("line.stem")
        .data(data)
        .enter().append("line")
        .attr("class", "stem")
        .attr("x1", function (d) { return x(d["date"]) + 0.25 * (width - 2 * margin) / data.length; })
        .attr("x2", function (d) { return x(d["date"]) + 0.25 * (width - 2 * margin) / data.length; })
        .attr("y1", function (d) { return y(d["high"]); })
        .attr("y2", function (d) { return y(d["low"]); })
        .attr("stroke", function (d) { return d.open > d.close ? "red" : "green"; });

    chart.append("path")
        .data([data])
        .attr("d", line1)
        .attr("class", "line")
        .style("stroke", "white")
        .attr("fill", "none")
        .attr("stroke-width", 2);


}

buildChart(twoHundredDayCandleStickChart);
</script>

var TwondredDaycandlestickChart=[]；
//从2个属性中提取，因此必须这样做
@对于（int i=0；i！=100；++i）
{
@：twoondredDayCandleStickChart.push（{date:'@Model.DailyTimeSeriesData.Data.ElementAt（i）.Key'，high:'@Model.DailyTimeSeriesData.Data.ElementAt（i）.Value.high'，low:'@Model.DailyTimeSeriesData.Data.ElementAt（i）.Value.open'，close:'@Model.DailyTimeSeriesData.Data.ElementAt（i）.Value.open）.Value.close'，sma:'@Model.twoondreddaysma.Data.ElementAt（i.Value.sma'}）
}
console.log（二百个daycandlestickchart）；
var宽度=900；
var高度=500；
var保证金=50；
函数min（a，b）{返回ab？a:b；}
//烛台上的烛台
变量y=d3.scaleLinear（）.range（[height-margin，margin]）；
var x=d3.scaleTime（）.range（[margin，width-margin]）；
//这条线是y型的
变量y1=d3.scaleLinear（）.range（[height-margin，margin]）；
//sma的生产线
var line1=d3.line（）
.x（函数（d）{返回x（d[“日期”]；}）
.y（函数（d）{返回y（d[“sma”]；}）；
功能构建图（数据）{
data.forEach（函数（d）{
d、 日期=新日期（d.日期）；
d、 高=+d.高；
d、 低=+d.低；
d、 open=+d.open；
d、 close=+d.close；
d、 sma=+d.sma；
});
var图表=d3。选择（#两百个大屏幕烛台）
.append（“svg”）
.attr（“类别”、“图表”）
.attr（“宽度”，宽度）
.attr（“高度”，高度）；
//map将创建一个包含所有低点的数组，然后d3.min将从所有低点中取出最小值
y、 域（[d3.min（data.map（函数（x）{return x[“low”]；}）），d3.max（data.map（函数（x）{return x[“high”]；}]））
x、 域（d3.extent（数据，函数（d）{returnd[“date”]；}））
y1.domain（d3.extent（68，d3.max（数据，函数（d）{返回d[“sma”]；}）））
//图表的网格；x轴和y轴
chart.selectAll（“line.x”）
.数据（x.ticks（10））
.enter（）.append（“行”）
.attr（“类”、“x”）
//.文本（字符串）
.attr（“x1”，x）
.attr（“x2”，x）
.attr（“y1”，保证金）
.attr（“y2”，高度-余量）
.attr（“笔划”和“#ccc”）；
chart.selectAll（“line.y”）
.数据（y.ticks（10））
.enter（）.append（“行”）
.attr（“类别”、“y”）
.attr（“x1”，边距）
.attr（“x2”，宽度-边距）
.attr（“y1”，y）
.attr（“y2”，y）
.attr（“笔划”和“#ccc”）；
//x轴
图表.附加（“g”）
.attr（“transform”，“translate（0，+450+）”）//需要将此450更改为一个变量-它是轴向下的距离
.attr（“class”，“xrule”）//给它一个类，这样它就可以只用于选择xaxis标签或更改颜色
//x轴
.call（d3.axisBottom（x））
.selectAll（“文本”）
.style（“文本锚定”、“结束”）
.attr（“dx”，“-.8em”）
.attr（“dy”，“.15em”）
.attr（“转换”，函数（d）{
返回“旋转（-65）”
});
//y轴
chart.selectAll（“text.yrule”）
.数据（y.ticks（10））
.输入（）
.append（“文本”）
.attr（“类别”、“规则”）
.attr（“x”，0）
.attr（“y”，y）
.attr（“dy”，0）
.attr（“dx”，20）
.attr（“文本锚定”、“中间”）
.文本（字符串）；
//添加矩形-如果打开得更高，则关闭，然后是红色
图表。选择全部（“rect”）
.数据（数据）
.enter（）.append（“rect”）
.attr（“x”，函数（d）{return x（d[“date”]）；}）
.attr（“y”，函数（d）{返回y（最大值（d[“打开”]，d[“关闭”]）；}）
.attr（“高度”，函数（d）{返回y（最小值（d[“打开”]、d[“关闭”]））-y（最大值（d[“打开”]、d[“关闭”]）；}
.attr（“宽度”，函数（d）{返回0.5*（宽度-2*边距）/data.length；}）
.attr（“填充”，函数（d）{返回d[“打开”]>d[“关闭”]？“红色”：“绿色”；}）；
//在矩形中添加一个干
chart.selectAll（“line.stem”）
.数据（数据）
.enter（）.append（“行”）
.attr（“类”、“干”）
.attr（“x1”，函数（d）{return x（d[“date”]）+0.25*（宽度-2*边距）/data.length；}）
.attr（“x2”，函数（d）{returnx（d[“date”]）+0.25*（宽度-2*边距）/data.length；}）
.attr（“y1”，函数（d）{返回y（d[“high”]；}）
.attr（“y2”，函数（d）{返回y（d[“low”]；}）
.attr（“笔划”，函数（d）{返回d.open>d.close？“红色”：“绿色”}）；
图表.附加（“路径”）
.数据（[数据]）
.attr（“d”，第1行）
.attr（“类”、“行”）
.style（“笔划”、“白色”）
.attr（“填充”、“无”）
.attr（“笔划宽度”，2）；
}
建筑图（二百年坎德尔斯蒂克哈特）；

上面的代码给出了下面的图像：

---

d3.选择（#两百个烛台）

尝试更改上面的代码，如下所示

---

d3.选择（“svg”）或给出div Id

上图中的问题是我的刻度！我把这个域作为蜡烛棒数据，但是直线数据比一分钟低很多。因此，整个图形不是