node.js - 使用 .ejs 文件在节点中生成 d3 图表时出现“未捕获的语法错误：参数列表后缺失”

Question

我正在动态传递 JSON 数据以加载节点 .ejs 文件中的 d3 条形图。当我传入 JSON 时var coreData= JSON.parse('<%- JSON.stringify(data) %>');，Uncaught SyntaxError: missing ) after argument list出现错误。拨打电话后，我的 d3 图表未加载。请同时查看我的 d3 代码。我使用引导程序作为工具提示，使用 CSS 来定义我的 SVG 定义尺寸。在代码的某些部分也使用 jQuery

我在我的代码中尝试了不同的更改，但没有成功。

var coreData = JSON.parse('<%- JSON.stringify(data) %>');
var noOfLoads = 1,
    notdecimal = d3.format('.0f');
var ActiveEmpData = coreData.filter(function (d) {
    return d['Employment Status'] == 'Active';
});
var InActiveEmpData = coreData.filter(function (d) {
    return d['Employment Status'] != 'Active';
});
var TotalWorkingEmps = ActiveEmpData.length;
var sourcesInfo = d3.nest()
    .key(function (d) {
        return d['Employee Source'];
    })
    .rollup(function (d) {
        return d3.format('.1f')(d.length * 100 / coreData.length);
    })
    .entries(InActiveEmpData);
var darkColors = ['#f44336', '#673ab7', '#9c27b0', '#2196f3', '#009688', '#e91e63', '#009688', '#ffeb3b', '#2962ff', '#4caf50'];
var selectedDept = 'All';

function EmployementSource() {
    sourcesInfo.sort(function (a, b) {
        return b.values - a.values;
    });
    var topTenSources = sourcesInfo.slice(0, 10);
    d3.selectAll('#Employement_Source').html('');
    var margin = {
        top: 10,
        right: 10,
        bottom: 50,
        left: 40
    };
    var barcolor = '#0091ea';
    var width = parseInt($("#Employement_Source").parent().width()) - margin.left - margin.right;
    var height = parseInt($("#Employement_Source").parent().height()) - margin.top - margin.bottom - parseInt($(".title").parent().height());

    var chart = d3.select("#Employement_Source")
        .attr("width", width + margin.left + margin.right)
        .attr("height", height + margin.top + margin.bottom)
        .append("g")
        .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
    var x = d3.scale.ordinal()
        .domain(topTenSources.map(function (d) {
            return d.key;
        }))
        .rangeRoundBands([0, width], .2);

    var y = d3.scale.linear()
        .domain([0, d3.max(topTenSources, function (d) {
            return d.values;
        })])
        .range([height, 0]);

    var xAxis = d3.svg.axis()
        .scale(x)
        .orient("bottom")
        .tickFormat(function (d) {
            return d.slice(0, 5) + "...";
        });

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

    var axisx = chart.append("g")
        .attr("class", "x1 axis")
        .attr("transform", "translate(0," + height + ")")
        .call(xAxis);

    axisx.selectAll("text")
        .style("text-anchor", "start")
        .attr("dx", ".75em")
        .attr("dy", ".15em")
        .attr("transform", "rotate(45)");
    axisx.append("text")
        .attr("x", 90)
        .attr("y", 45)
        .attr("dx", width / 4)
        .attr("transform", "rotate(0)")
        .style("text-anchor", "middle")
        .style('font-weight', 'bold')
        .style("fill", "#98a6ad")
        .style("font-size", "11px")
        .text("Employement Source");

    chart.append("g")
        .attr("class", "y1 axis")
        .call(yAxis)
        .append("text")
        .attr("transform", "rotate(-90)")
        .attr("x", -height / 2)
        .attr("dy", "-2em")
        .style("text-anchor", "middle")
        .style('font-weight', 'bold')
        .style("fill", '#98a6ad')
        .style("font-size", "11px")
        .text("Employement %");
    var bar = chart.selectAll(".bar")
        .data(topTenSources)
        .enter().append("rect")
        .attr("class", "bar")
        .attr("data-toggle", "tooltip")
        .attr("data-html", true)
        .attr("title", function (d, i) {
            return d.key + " <br> " + d3.format('.1f')(d.values) + "%";
        })
        .attr("x", function (d) {
            return x(d.key);
        })
        .attr("y", function (d) {
            if (noOfLoads == 1) {
                return height;
            } else {
                return y(d.values);
            }
        })
        .attr("width", x.rangeBand())
        .attr("height", function (d) {
            if (noOfLoads == 1) {
                return 0;
            } else {
                return height - y(d.values);
            }
        })
        .attr("fill", function (d, i) {
            return barcolor;
        })
        .attr("id", function (d, i) {
            return i;
        })
        .on("mouseover", function () {
            d3.select(this)
                .attr("fill", "#2962ff");
        })
        .on("mouseout", function (d, i) {
            d3.select(this).attr("fill", function () {
                return barcolor;
            });
        });

    bar.transition()
        .duration(2000)
        .ease("bounce")
        .attr("y", function (d) {
            return y(d.values);
        })
        .attr("height", function (d) {
            return height - y(d.values);
        });

    $('[data-toggle="tooltip"]').tooltip();

}
setTimeout(function () {
    EmployementSource();
}, 500);

Uncaught SyntaxError: missing ) after argument list

标签： node.jsexpressd3.js