D3.js分组柱状图与折线图融合问题：折线无法渲染

我帮你找出了几个导致折线图无法显示的核心问题，咱们一个个拆解：

1. 异步AJAX的执行顺序与作用域错误 #

你的AJAX请求是异步操作，但你把依赖返回数据的代码（比如数据格式处理、轴域设置、折线绘制）都放在了success回调外面。这会导致这些代码执行时，obj还没被赋值，直接引发变量未定义的错误，后续折线绘制自然无法进行。所有需要用到AJAX返回数据的逻辑，必须放在success回调函数内部。

2. 逻辑运算符使用错误 #

你在过滤字段时用了位运算符&，这是语法错误，应该用逻辑与运算符&&：

• 错误写法：if (key != "date_created" & key != "jobs_success" )
• 正确写法：if (key !== "date_created" && key !== "jobs_success" )

另外，line_option的过滤逻辑完全不合理——单个key不可能同时是date_created和jobs_success，其实我们只需要确保折线能拿到jobs_success字段即可，不需要单独过滤这个数组。

3. 折线图的坐标映射错误 #

你定义的折线生成函数里，x坐标用了x1(d.date_created)，但x1是用来映射柱状图分组（jobs_fail、jobs_resub）的刻度，而date_created是x0的定义域，应该用x0(d.date_created) + x0.rangeBand()/2，让折线点落在每组柱状图的中间位置，视觉上更合理。

同时，原来的y轴定义域只考虑了柱状图的最大值，没包含jobs_success的数值，如果jobs_success的数值超过柱状图最大值，折线会被画到SVG可视区域外面。

4. 折线绘制的样式与数据绑定问题 #

默认的path元素没有样式，就算绘制了也看不见；而且你没有正确给折线绑定数据，直接传obj给line(obj)的写法不够规范。

修复后的完整代码 #

<script>
function get_data() {
    console.log("create post is working!") // sanity check
    return $.ajax({
        url : "/group/guest/query/", // the endpoint
        type : "GET", // http method
        dataType: "json" // 自动解析JSON，无需手动parse
    });
};

var margin = { top: 20, right: 20, bottom: 30, left: 40 },
    width = 960 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom;

var x0 = d3.scale.ordinal()
    .rangeRoundBands([0, width], .1);

var x1 = d3.scale.ordinal();

var y = d3.scale.linear()
    .range([height, 0]);

var colorRange = d3.scale.category20();
var color = d3.scale.ordinal()
    .range(colorRange.range());

var divTooltip = d3.select("body").append("div").attr("class", "toolTip");

var xAxis = d3.svg.axis()
    .scale(x0)
    .orient("bottom");

var yAxis = d3.svg.axis()
    .scale(y)
    .orient("left")
    .ticks(10, "");

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

var ajdata = get_data();

ajdata.success(function (data) {
    var obj = data;
    console.log(obj);

    // 过滤柱状图需要的字段：排除日期和折线字段
    var options = d3.keys(obj[0]).filter(function(key) {
        return key !== "date_created" && key !== "jobs_success";
    });

    // 处理柱状图数据格式
    obj.forEach(function(d) {
        d.valores = options.map(function(name) {
            return { name: name, value: +d[name] };
        });
    });

    // 计算y轴最大值：同时覆盖柱状图和折线图的数值
    var maxY = d3.max(obj, function(d) {
        return Math.max(
            d3.max(d.valores, function(v) { return v.value; }),
            d.jobs_success
        );
    });

    // 设置轴的定义域
    x0.domain(obj.map(function(d) { return d.date_created; }));
    x1.domain(options).rangeRoundBands([0, x0.rangeBand()]);
    y.domain([0, maxY]);

    // 绘制X轴
    svg.append("g")
        .attr("class", "x axis")
        .attr("transform", "translate(0," + height + ")")
        .call(xAxis);

    // 绘制Y轴
    svg.append("g")
        .attr("class", "y axis")
        .call(yAxis)
        .append("text")
        .attr("transform", "rotate(-90)")
        .attr("y", 6)
        .attr("dy", ".71em")
        .style("text-anchor", "end")
        .text("Number of jobs");

    // 绘制分组柱状图
    var bar = svg.selectAll(".bar")
        .data(obj)
        .enter().append("g")
        .attr("class", "rect")
        .attr("transform", function(d) { return "translate(" + x0(d.date_created) + ",0)"; });

    bar.selectAll("rect")
        .data(function(d) { return d.valores; })
        .enter().append("rect")
        .attr("width", x1.rangeBand())
        .attr("x", function(d) { return x1(d.name); })
        .attr("y", function(d) { return y(d.value); })
        .attr("value", function(d){return d.name;})
        .attr("height", function(d) { return height - y(d.value); })
        .style("fill", function(d) { return color(d.name); });

    // 柱状图tooltip逻辑
    bar.on("mousemove", function(d){
        divTooltip.style("left", d3.event.pageX+10+"px");
        divTooltip.style("top", d3.event.pageY-25+"px");
        divTooltip.style("display", "inline-block");
        var elements = document.querySelectorAll(':hover');
        var l = elements.length - 1;
        var elementData = elements[l].__data__;
        divTooltip.html(d.date_created + "<br>" + elementData.name + "<br>" + elementData.value);
    });

    bar.on("mouseout", function(d){
        divTooltip.style("display", "none");
    });

    // 绘制图例
    var legend = svg.selectAll(".legend")
        .data(options.slice())
        .enter().append("g")
        .attr("class", "legend")
        .attr("transform", function(d, i) { return "translate(0," + i * 20 + ")"; });

    legend.append("rect")
        .attr("x", width - 18)
        .attr("width", 18)
        .attr("height", 18)
        .style("fill", color);

    legend.append("text")
        .attr("x", width - 24)
        .attr("y", 9)
        .attr("dy", ".35em")
        .style("text-anchor", "end")
        .text(function(d) { return d; });

    // 定义折线生成函数
    var line = d3.svg.line()
        .x(function(d) { 
            // 让折线点落在每组柱状图的中间
            return x0(d.date_created) + x0.rangeBand() / 2; 
        })
        .y(function(d) { return y(d.jobs_success); })
        .interpolate("monotone"); // 可选：让折线更平滑

    // 绘制折线
    svg.append("path")
        .datum(obj) // 绑定数据
        .attr("class", "line")
        .attr("d", line)
        .style("fill", "none")
        .style("stroke", "#ff7f0e") // 设置折线颜色
        .style("stroke-width", 2); // 设置折线宽度

    // 可选：添加折线数据点标记
    svg.selectAll(".line-point")
        .data(obj)
        .enter().append("circle")
        .attr("class", "line-point")
        .attr("cx", function(d) { return x0(d.date_created) + x0.rangeBand() / 2; })
        .attr("cy", function(d) { return y(d.jobs_success); })
        .attr("r", 4)
        .style("fill", "#ff7f0e");
});
</script>

额外优化说明 #

• 给AJAX请求添加了dataType: "json"，jQuery会自动解析返回的JSON字符串，无需手动调用jQuery.parseJSON
• 给折线添加了明确的样式（颜色、宽度），避免因默认无样式导致看不见
• 优化了y轴最大值的计算逻辑，确保折线不会超出SVG可视范围
• 可选添加了折线的数据点标记，让数据展示更清晰

内容的提问来源于stack exchange，提问作者Django Man