Question

我在IBM Cognos Analytics中配置D3条形图示例时遇到问题。我已经编辑了Cognos的D3示例，以合并值的标题，但不幸的是，我似乎无法正确显示数据。看起来矩形已正确分配了值，但每个条形的高度都相同。因此，它看起来像1个大酒吧。

有人知道如何解决该问题吗？我曾尝试在bl.ocks.org上查看一些示例，但它不起作用（例如，我尝试复制此https://bl.ocks.org/caravinden/eb0e5a2b38c8815919290fa838c6b63b）！

外观如下：

define( ["https://censored/samples/javascript/lib/d3.min.js"], function( d3 ) {
"use strict";

function D3BarChart()
{
};

D3BarChart.prototype.draw = function( oControlHost )
{
    var o = oControlHost.configuration;
    var margin = {top: 20, right: 150, bottom: 30, left: 80},
        width = 1040 - margin.left - margin.right,
        height = 500 - margin.top - margin.bottom;

    var x = d3.scaleLinear()
        .domain( [0, d3.max( this.m_aValues )])
        .range( [0, width] );

    var y = d3.scaleBand()
    //  .domain(data.map(function(d) { return this.m_aLabels;}))
        .rangeRound([height, 0])
        .padding(0.1);

    var xAxis = d3.axisBottom(x);

    var yAxis = d3.axisLeft(y);

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

    svg.selectAll( ".bar" )
    .data( this.m_aValues)
    .enter().append( "rect" )
    .attr("class", "bar")
    .attr("y", function(d) { return this.m_aLabels; })
    .attr( "width", function(d) { return x(d); } )
    .attr( "height", y.bandwidth())
    .text( function( d ) { return d; } );

    svg.append("g")
      .attr("class", "y axis")
      .call((yAxis)
        .tickSize(3)
        .tickPadding(6));
};

D3BarChart.prototype.setData = function( oControlHost, oDataStore )
{
               this.m_oDataStore = oDataStore;
               this.m_aValues = [];
               this.m_aLabels = [];
               var iRowCount = oDataStore.rowCount;
               for ( var iRow = 0; iRow < iRowCount; iRow++ )
               {
                              this.m_aLabels.push( oDataStore.getCellValue( iRow, 0 ) );
                              this.m_aValues.push( oDataStore.getCellValue( iRow, 1 ) );
               }
};

return D3BarChart;
});

Answer 1

您的数据不合适。看起来您有两个数组，每个数据点需要一个数组：

this.data = [];
var iRowCount = oDataStore.rowCount;
for ( var iRow = 0; iRow < iRowCount; iRow++ )
{
  this.data.push( {label: oDataStore.getCellValue( iRow, 0 ), value: oDataStore.getCellValue( iRow, 1 ) } );
}

然后您的域将变为：

var x = d3.scaleLinear()
    .domain( [0, d3.max(this.data, function(d) { return d.value; } ])
    .range( [0, width] );

var y = d3.scaleBand()
    .domain(this.data.map(function(d) { return d.label; }))
    .rangeRound([height, 0])
    .padding(0.1);

最后，你的酒吧变成了

svg.selectAll( ".bar" )
  .data( this.data )
  .enter().append( "rect" )
  .attr("class", "bar")
  .attr("y", function(d) { return y(d.label); })
  .attr( "width", function(d) { return x(d.value); } )
  .attr( "height", y.bandwidth())
  .text( function( d ) { return d.label; } );

IBM Cognos Analytics与D3.js条形图高度问题

1 个答案: