Question

首先，让我接受我是d3.js的新手。我相当习惯R。由于堆栈溢出社区和一些d3.js示例，我一直在d3.js中进行绘图。我遇到过r2d3作为连接R和d3.js绘图的一种方式，因此使用它来建立连接。

我已经在d3.js中创建了一个绘图，并希望将其与R Shiny输出连接。我可以将剧情连接到R Shiny。但是情节总是从闪亮的情节区域出来。

这是我的情节在R Shiny区域的外观：

要求您提出以下建议：

如何修复R Shiny Area中的d3.js图。

我的Ui.R代码如下：

column(d3Output("clplot"),width = 12)

我的服务器代码如下：

  output$clplot <-r2d3::renderD3(
r2d3(data = cl_d3(),script="d3/cl_dilip_v1.js", d3_version = "5")

）

js代码如下：

var margin = { top: 20, right: 20, bottom: 30, left: 50 },
    width = +svg.attr("width") - margin.left - margin.right,
    height = +svg.attr("height") - margin.top - margin.bottom;

var jsondata = [{ "promotedprice": 100, "nonpromotedprice": 350, "avgprice": 230, "x_value": 80, "brand": "Brand1" }, { "promotedprice": 99, "nonpromotedprice": 170, "avgprice": 130, "x_value": 140, "brand": "Brand2" }, { "promotedprice": 47, "nonpromotedprice": 147, "avgprice": 80, "x_value": 200, "brand": "Brand3" }, { "promotedprice": 100, "nonpromotedprice": 250, "avgprice": 220, "x_value": 260, "brand": "Brand4" }, { "promotedprice": 99, "nonpromotedprice": 170, "avgprice": 130, "x_value": 320, "brand": "Brand5" }];




// Creating the colour Category

var color = d3.scaleOrdinal(d3.schemeCategory10);

// Creating the 1st Comapartment

var svg = d3.select("body").append("svg")
    .attr("width", 400)
    .attr("height", 450);

var div = d3.select("body").append("div")
    .attr("class", "tooltip")
    .style("opacity", 0);

// Attach the Promoted Price Rectangle    
var g = svg.selectAll("rect")
    .data(data)
    .enter()
    .append("g")
    .classed('rect', false)
    .on("mouseover", function (d) {
        div.transition()
            .duration(200)
            .style("opacity", .9);
        div.html(formatTime(d.x_value) + "<br/>" + d.nonpromotedprice);
        //.style("left", (d3.event.pageX) + "px")
        //.style("top", (d3.event.pageY - 28) + "px");
    })
    .on("mouseout", function (d) {
        div.transition()
            .duration(0)
            .style("opacity", 0);
    })
    .call(d3.drag()
        .on("start", dragstarted)
        .on("drag", dragged)
        .on("end", dragended));




var accent = d3.scaleOrdinal(d3.schemeAccent);

// Line for the 1st Block
g.append("line")          // attach a line
    .style("stroke", "#E6EAEE")
    .style("stroke-width", 17)  // colour the line
    .attr("x1", function (d) { return d.x_value; })     // x position of the first end of the line
    .attr("y1", function (d) { return d.nonpromotedprice; })      // y position of the first end of the line
    .attr("x2", function (d) { return d.x_value; })     // x position of the second end of the line
    .attr("y2", function (d) { return d.promotedprice; });


// Promoted Price Rectangle for the 1st Block
g.append("rect")
    .attr("width", 24)
    .attr("height", 13)
    .attr("x", function (d) { return d.x_value - 12; })
    .attr("y", function (d) { return d.promotedprice; })
    .attr("fill", function (d) { return color(d.x_value); })


// Non Promoted Price Rectangle for the 1st Block
g.append("rect")
    .attr("width", 24)
    .attr("height", 13)
    .attr("x", function (d) { return d.x_value - 12; })
    .attr("y", function (d) { return d.nonpromotedprice; })
    .attr("fill", function (d) { return color(d.x_value); })


// Average Price Rectangle for the 1st Block
g.append("rect")
    .attr("width", 24)
    .attr("height", 13)
    .attr("x", function (d) { return d.x_value - 12; })
    .attr("y", function (d) { return d.avgprice; })
    .attr("fill", function (d) { return color(d.x_value); });



// Graph X- Axis and Title Text for 1st svg


var y_scale = d3.scaleLinear()
    //.domain([d3.min(function (d) { return d.promotedprice }), d3.max(function (d) { return d.nonpromotedprice; })])
    .range([370, 0]);

var y_axis = d3.axisLeft()
    .scale(y_scale);

y_scale.domain([0, d3.max(data, function (d) { return d.nonpromotedprice; })]).nice();

g.append("g")
    .attr("class", "grid")
    .attr("transform", "translate(0, 40)")
    .attr("fill", "lightgrey")
    .attr("stroke-width", 0.15)
    .attr("stroke-opacity", 0.2)
    //.attr("shape-rendering", crispEdges)
    //stroke-opacity: 0.7;shape-rendering: crispEdges;
    .call(y_axis
        .tickSize(-420)
        .tickFormat(""))
    ;


// PEPSICO AS-IS BRAND CALL OUT
g.append("rect")
    .attr("width", 38)
    .attr("height", 20)
    .attr("x", function (d) { return d.x_value - 2; })
    .attr("y", function (d) { return d.promotedprice; })
    .attr("fill", function (d) { return color(d.x_value); })
    .attr("transform", "translate(" + -15 + "," + -40 + ")");

g.append("text")
    //.classed('rotation', true)


    //.attr('x', (d,i)=> xScale(i))
    .attr("x", function (d) { return d.x_value - 13; })
    .attr("y", function (d) { return d.promotedprice - 28; })
    .attr("dy", ".35em")
    .text(function (d) { return d.brand; })
    .style("font-family", "arial")
    .style("font-size", 8)

    .attr("stroke-width", 0.15)
    .attr("fill", "white");


function dragstarted(d) {
    d3.select(this).raise().classed("active", true);
}

function dragged(d) {

    d3.select(this).select("rect").attr("y", d.y = d3.event.y);

    //.attr("x", d.x = d3.event.x)

}

function dragended(d) 
{
    d3.select(this).classed("active", false);
}

Answer 1

尝试删除部分代码：

var svg = d3.select("body").append("svg") .attr("width", 400) .attr("height", 450);

d3.js图未显示在R Shiny图区域内

1 个答案: