Javascript dc.js如何在渲染后更新yscale

我有一个脚本，叫做seriescart。我用三个按钮链接了图表，它们加载不同的数据集并相应地更新图表（请参见下面的代码）。我希望在每次选择另一个数据集时重新定义yscale。我不知道如何才能做到这一点，因为我无法访问按钮函数中的图表对象。非常感谢你的帮助

<div class="row  top-buffer">
<div class="col-sm-4">
    <button class="btn" onclick="button1()">1</button>
</div>
<div class="col-sm-4">
    <button class="btn" onclick="button2()">2</button>
</div>
<div class="col-sm-4">
   <button class="btn" onclick="button3()">3</button>
</div>

</div>

<div class="row top-buffer">
    <div id="chart" class="col-sm-12">
        <h6 id="title">{{ title }}</h6>
        <span class='reset'>
              Current filter: <span class='filter'></span>
        </span>
        <a class='reset'
          href='javascript:dc.filterAll();dc.redrawAll();'
          >reset</a>
    </div>
</div>


<script>

/**********************************
* Step0: template set up *
**********************************/

var width_block=  Math.max(1100, $("{{ id_chart }}").width());

var palette_color_block = ["#6c5373", "#8badd9", "#b6d6f2", "#45788c", "#6E87F2", "#996A4E", "#BF7761",
    "#735360", "#D994B0", "#6C5373", "#7F805E", "#A6A27A", "#48BDCC", "#FFC956", "#f2f2f2"];

var shades_and_tints = ["#305462", "#376070", "#3e6c7e", "#45788c", "#578597", "#6a93a3", "#7ca0ae",
"#8faeba", "#a2bbc5", "#b4c9d1", "#c7d6dc", "#d9e4e8"];

var complementary_color = ["#45788c", "#8c5945"];
var triadic_color = ["#788c45", "#45788c", "#8c4578"];

var myChart = new dc.SeriesChart("#chart");
/**********************************
* Step1: Load data from json file *
**********************************/
d3.json("{% url my_url %}").then(function(data){

    const dateFormatSpecifier = "%Y-%m-%d";
    const dateFormat = d3.timeFormat(dateFormatSpecifier);
    const dateFormatParser = d3.timeParse(dateFormatSpecifier);
    const numberFormat = d3.format('.2f');



     data.forEach(function(d) {
        d.dd = dateFormatParser(d.date);
        d.month = d3.timeMonth(d.dd); // pre-calculate month for better performance
        d.vami = +d.vami;
          });

    const minY = d3.min(data, function(d) { return d.vami; }),
          maxY = d3.max(data, function(d) { return d.vami; });

    /******************************************************
    * Step2: Create the dc.js chart objects & ling to div *
    ******************************************************/

    

    /************************************************
    * Step3:    Run the data through crossfilter    *
    ************************************************/

    ndx = crossfilter(data); // Gets our 'facts' into crossfilter

    /******************************************************
    * Step4: Create the Dimensions                        *
    * A dimension is something to group or filter by.     *
    * Crossfilter can filter by exact value, or by range. *
    ******************************************************/
    const dateDimension = ndx.dimension(d => d.dd);
    const nameMonthDimension = ndx.dimension(function(d) {return [d.name, d.month]; });
    const nameMonthGroup = nameMonthDimension .group().reduceSum(function(d) { return +d.vami; });

    let xScale = d3.scaleTime().domain([dateDimension .bottom(1)[0].dd, dateDimension .top(1)[0].dd])
    let yScale = d3.scaleLinear().domain([minY, maxY])


    /***************************************
    *   Step5: Create the Visualisations   *
    ***************************************/
    myChart
        .width(width_block)
        .height(width_block/3)
        .transitionDuration(500)
        .margins({top: width_block/30, right: width_block/20, bottom: width_block/40, left: 
           width_block/25})
        .chart(function(c) { return new dc.LineChart(c); })
        .ordinalColors(palette_color_block)
        .mouseZoomable(true)
        .brushOn(false)
        .clipPadding(10)
        .elasticY(false)
        .x(xScale)
        .y(yScale)
        .round(d3.timeMonth.round)
        .xUnits(d3.timeMonths)
        .dimension(nameMonthDimension )
        .group(nameMonthGroup )
        .seriesAccessor(function(d) {return d.key[0];})
        .keyAccessor(function(d) {return +d.key[1];})
        .valueAccessor(function(d) {return +d.value;})        
.legend(dc.legend().x(60).y(60).itemHeight(13).gap(5).horizontal(1).legendWidth(200).itemWidth(200));


    /****************************
    * Step6: Render the Charts  *
    ****************************/
    dc.renderAll();

});
function load_button(file) {
    return function load_it() {
        d3.json(file).then(function(new_data){

        const dateFormatSpecifier = "%Y-%m-%d";
        const dateFormat = d3.timeFormat(dateFormatSpecifier);
        const dateFormatParser = d3.timeParse(dateFormatSpecifier);
        const numberFormat = d3.format('.2f');



     new_data.forEach(function(d) {
        d.dd = dateFormatParser(d.date);
        d.month = d3.timeMonth(d.dd); // pre-calculate month for better performance
        d.vami = +d.vami;
          });

         const minY = d3.min(new_data, function(d) { return d.vami; }),
              maxY = d3.max(new_data, function(d) { return d.vami; });

         let yScale = d3.scaleLinear().domain([minY, maxY])

         ndx.remove(() => true);
         ndx.add(new_data);
        myChart.y(yScale);
        dc.redrawAll();
         
        });
    };
}

var button1 = load_button("{% url my_url %}"),
    button2 = load_button("{% url my_url2 %}"),
    button3 = load_button("{% url my_url3 %}");

</script> 

1.
2.
3.
{{title}}
当前筛选器：
/**********************************
*步骤0：模板设置*
**********************************/
var width_block=Math.max（1100，$）.width（）；
变量调色板颜色块=[“6c5373”、“8badd9”、“b6d6f2”、“45788c”、“6E87F2”、“996A4E”、“BF7761”，
“#735360”、“#D994B0”、“#6C5373”、“#7F805E”、“#A6A27A”、“#48BDCC”、“#FFC956”、“#f2f2f2”]；
var shades_和_tints=[“#305462”、“#376070”、“#3e6c7e”、“#45788c”、“#578597”、“#6a93a3”、“#7ca0ae”，
“#8faeba”、“#a2bbc5”、“#b4c9d1”、“#c7d6dc”、“#d9e4e8”]；
var互补色=[“45788c”，“8c5945”]；
变量triadic_color=[“#788c45”、“#45788c”、“#8c4578”]；
var myChart=新的dc.Seriescart（“图表”）；
/**********************************
*步骤1：从json文件加载数据*
**********************************/
d3.json（“{%url my_url%}”）。然后（函数（数据）{
常量dateFormatSpecifier=“%Y-%m-%d”；
const dateFormat=d3.timeFormat（日期格式说明符）；
const dateFormatParser=d3.timeParse（dateFormatSpecifier）；
常量numberFormat=d3.format（'.2f'）；
data.forEach（函数（d）{
d、 dd=dateFormatParser（d.date）；
d、 month=d3.timeMonth（d.dd）；//预先计算月份以获得更好的性能
d、 vami=+d.vami；
});
const minY=d3.min（数据，函数（d）{返回d.vami；}），
maxY=d3.max（数据，函数（d）{返回d.vami；}）；
/******************************************************
*步骤2：创建dc.js图表对象&ling to div*
******************************************************/
/************************************************
*步骤3：通过交叉过滤器运行数据*
************************************************/
ndx=交叉过滤器（数据）；//将“事实”放入交叉过滤器
/******************************************************
*步骤4：创建尺寸标注*
*维度是分组或筛选的依据*
*交叉过滤器可以按精确值或范围进行过滤*
******************************************************/
const dateDimension=ndx.dimension（d=>d.dd）；
const nameMonthDimension=ndx.dimension（函数（d）{return[d.name，d.month]；}）；
const nameMonthGroup=nameMonthDimension.group（）.reduceSum（函数（d）{return+d.vami；}）；
设xScale=d3.scaleTime（）.domain（[dateDimension.bottom（1）[0].dd，dateDimension.top（1）[0].dd]）
设yScale=d3.scaleLinear（）.domain（[minY，maxY]）
/***************************************
*步骤5：创建可视化*
***************************************/
我的图表
.宽度（宽度块）
.高度（块宽度/3）
.过渡期（500）
.margins（{顶部：宽度块/30，右侧：宽度块/20，底部：宽度块/40，左侧：
宽度（块/25}）
.chart（函数（c）{返回新的dc.LineChart（c）；}）
.普通颜色（调色板\颜色块）
.mouseZoomable（真）
.brushOn（错）
.clipPadding（10）
.elasticY（假）
.x（xScale）
.y（yScale）
.round（d3.timeMonth.round）
.xUnits（d3.时间月）
.尺寸（名称和尺寸）
.组（名称MonthGroup）
.seriesAccessor（函数（d）{返回d.key[0]；}）
.keyAccessor（函数（d）{return+d.key[1]；}）
.valueAccessor（函数（d）{return+d.value；}）
.图例（dc.legend（）.x（60）.y（60）.项目高度（13）.间隙（5）.水平（1）.legendWidth（200）.项目宽度（200））；
/****************************
*步骤6：渲染图表*
****************************/
dc.renderAll（）；
});
功能加载按钮（文件）{
返回函数load_it（）{
d3.json（文件）.then（函数（新的_数据）{
常量dateFormatSpecifier=“%Y-%m-%d”；
const dateFormat=d3.timeFormat（日期格式说明符）；
const dateFormatParser=d3.timeParse（dateFormatSpecifier）；
常量numberFormat=d3.format（'.2f'）；
新的_data.forEach（函数（d）{
d、 dd=dateFormatParser（d.date）；
d、 month=d3.timeMonth（d.dd）；//预先计算月份以获得更好的性能
d、 vami=+d.vami；
});
const minY=d3.min（新的_数据，函数（d）{return d.vami；}），
maxY=d3.max（新的_数据，函数（d）{返回d.vami；}）；
设yScale=d3.scaleLinear（）.domain（[minY，maxY]）
ndx.remove（（）=>true）；
ndx.add（新的_数据）；
myChart.y（yScale）；
dc.redrawAll（）；
});
};
}
var button1=load_按钮（“{%url my_url%}”），
button2=加载按钮（“{%url我的url 2%}”），
button3=加载按钮（“{%url我的url%}”）；

这只是一个在哪里声明我的图表的问题

许多dc.js示例在调用

d3.json

之前声明变量：

var myChart;
d3.json("{% url my_url %}").then(function(data){
    // ...
    myChart = new dc.SeriesChart("#chart");

var myChart = new dc.SeriesChart("#chart");
d3.json("{% url my_url %}").then(function(data){
    // ...

或者，在调用

d3.json

之前移动初始化也无妨：

var myChart;
d3.json("{% url my_url %}").then(function(data){
    // ...
    myChart = new dc.SeriesChart("#chart");

var myChart = new dc.SeriesChart("#chart");
d3.json("{% url my_url %}").then(function(data){
    // ...

---

现在

myChart

将被全局声明，所有代码都可以访问。

太简单了！我真丢脸。非常感谢你，戈登。我还欠你的债。我相应地更新了代码。我在调用d3.json之前移动了初始化，并在dc.redrawAll（）之前添加了行myChart.y（yScale）；