Блог

Я пытаюсь создать диаграмму рассеяния с выпадающим меню, где различные варианты выбора в выпадающем меню изменят координаты точек, а также масштаб осей. Я считаю, что я близок к созданию массивов объектов со значениями для ссылок на мои данные в зависимости от того, какой выбор выбран, но мои ссылки не работают.

xxScale и yyScale соответствуют масштабу, а xData и yData относятся к столбцам в моих данных. Код работает до тех пор, пока я не изменю выбор в раскрывающемся списке, а затем я получу Uncaught TypeError: selectedGroup.xxScale is not a function среди других, я уверен, ошибок.

Я считаю, что моя проблема ограничена тем, что находится в строках 9-18 третьего поля (функция обновления) кода, но я включил то, что может быть соответствующим кодом, а также в случае, если это неверное предположение.

Я хочу, чтобы то, что выбрано из массива метрик, отфильтровывалось в код в строках 9-18, например, если выбрано «b», то d[Выбранная группа[«yData»]] будет d.yDatab

Я поиграл с различными брекетингами, размещением точек и т. Д. чтобы попытаться заставить его работать, но не повезло.

Массивы объектов, кнопки и масштабы:

   var a = {xxScale: "xScalea", yyScale: "yScalea", xData: "xDataa", yData: "yDataa"}
  var b = {xxScale: "xScaleb", yyScale: "yScaleb", xData: "xDatab", yData: "yDatab"}
  var c = {xxScale: "xScalec", yyScale: "yScalec", xData: "xDatac", yData: "yDatac"}
  // Button
  d3.select("#selectButton")
    .selectAll('myOptions')
    .data(Metric)
    .enter()
    .append('option')
    .text(function (d) { return d; }) // text showed in the menu
    .attr("value", function (d) { return d; })
  // Scales
  var xScale = d3.scaleLinear()
    .domain([0,1.2])
    .range([0,w])
  var xScaleTitle = d3.scaleLinear()
    .domain([0, 1])
    .range([0,w])
  var yScale = d3.scaleLinear()
    .domain([0,1.2 ])
    .range([h,0])
  var yScaleTitle = d3.scaleLinear()
    .domain([0,7])
    .range([h,0])
  var yScaleTitleRatio = d3.scaleLinear()
    .domain([0,9])
    .range([h,0])
  var rScale = d3.scaleSqrt()
    .domain([0.2,0.8])
    .range([0, 20])
  var rScaleMO = d3.scaleSqrt()
    .domain([.2,.8])
    .range([0, 30])

 

Создайте SVG-файлы

 // Circles
  var circles = svg.selectAll('circle')
      .data(data)
      .enter()
    .append('circle')
      .attr('cx',function (d) { return xScale(d.xDataa) })
      .attr('cy',function (d) { return yScale(d.yDataa) })
      .attr('r',20)
      .attr('stroke', function(d) { return d.Color1.slice(0,-1); })
      .attr('stroke-width',2)
      .style('fill', function(d) { return d.Color2.slice(0,-1); })
 

Update function

 // A function that updates the chart
    function update(selectedGroup) {

      // Create new data with the selection?

      // Give these new data to update circle
      circles
        .data(data)
        .transition()
        .duration(1000)
          .attr("cx", function(d) { return selectedGroup["xxScale"](d[selectedGroup["xData"]]) })
          .attr("cy", function(d) { return selectedGroup["yyScale"](d[selectedGroup["yData"]]) })

      // Change x-axis
      xAxis = d3.axisLeft()
        .scale(selectedGroup["xxScale"])

      // Change y-axis
      yAxis = d3.axisBottom()
        .scale(selectedGroup["yyScale"])
    }

    // When the button is changed, run the updateChart function
    d3.select("#selectButton").on("change", function(d) {
        // recover the option that has been chosen
        var selectedOption = d3.select(this).property("value")
        // run the updateChart function with this selected option
        update(selectedOption)
    })