0

I want to get the ref1 data from the csv and write it in the circle with the text following the circle's circumference. The data to draw the circle, which is in the csv as well, works perfectly like shown on the picture, just the text doesn't work. So the pronlem is not the csv reading.

I honestly don't understand it at all. I basically copied this example http://bl.ocks.org/jebeck/196406a3486985d2b92e but it just doesn't show up. No errors related to d3 are visible in the console so I have no way to locate the issue.

This is my full draw circles function, this draws the circles with the dashed circumference. The second block is the csv source for the circles with the dashed circumference. On the image you see the current visualisation. The dashed circles are visible, the text and arc are not.

EDIT: added css
EDIT: this question is wrongly marked as a duplicate, mistakes were made by the original writer of this code (using unsupported function in this version).

function drawCircles(){
  d3.csv("/data/education_storyline_input_tab_point_circles_20190911.csv", function(data){
    //console.log(data);
    var domaincircles = svg.append("svg")
                            .attr("class","domain");
    var circles = domaincircles.selectAll("circle")
                            .data(data)
                            .enter()
                            .append("circle")
                            .attr("r", function (d) { return d.r*12; })
                            .attr("cx", function(d) { return x(d.x); })
                            .attr("cy", function(d) { return y(d.y); })
                            .attr("class",function(d){return d.type})
                            .on("mouseover", handleMouseOver )
                            .on("mouseout", handleMouseOut );
    
    svg.append('defs')
        .append('path')
        .attr({
          d: "m10,20 a10,10 0 0 0 10,40",
          id: 'curvedTextPath'
        });
        
    svg.append('path')
            .attr({
              d: "m10,20 a10,10 0 0 0 10,40",
              id: 'visiblePath'
            });
            
    svg.append('text')
            .append('textPath')
            .text(data.ref1)
            .attr({
              startOffset: '50%',
              'xlink:href': '#curvedTextPath'
            });
  });
}

name,x,y,r,ref1,popup_header,popup_text,type,domain,link
housing,25,10,11,#housing,Housing,"Adequate housing constitutes a major challenge for migrants, they often tend to pay higher rents, live in more segregated neighborhoods in lower quality housing",circle_domain,housing,housing_c0
labour,56,10,11,#labour,Labour,"The educational performance is closely interrelated with migrants' chances on the labour market, where they have to combat discrimination, worse working conditions, and working jobs that don't match their qualifications.",circle_domain,labour,labour_c0

enter image description here

path {
    stroke: var(--violet);
    stroke-width: 2;
    fill: none;
    position: relative !important;
    z-index: 10 !important;
}

text {
  font-family: cursive;
  font-size: 48px;
  font-weight: bold;
  text-anchor: middle;
  color: black;
  z-index: 9000;
}
Jan-Pieter
  • 137
  • 2
  • 10
  • Have you added styles related to text and path ? If you could add whole code to some online platform (like code pen or stackblitz) where people can view it then it would helpful for analysis. – Abhay Sep 25 '19 at 07:58
  • The source data is contained in csv's, not sure how to add that to codepen. – Jan-Pieter Sep 25 '19 at 08:06
  • What version of D3 are you using? – altocumulus Sep 25 '19 at 08:08
  • @altocumulus d3 v5 I think – Jan-Pieter Sep 25 '19 at 08:10
  • That explains your problems. I closed it as duplicate; have a look at the dupe target. – altocumulus Sep 25 '19 at 08:11
  • @altocumulus I think you misunderstood the question, the csv data all works because the lines, circles and rectangles are all in csv's and they work properly. Please reopen the question. – Jan-Pieter Sep 25 '19 at 08:14
  • That's no contradiction: The function you provided to `d3.csv()` actually **is** executed, in fact, it is executed per row because it is interpreted as being the row conversion function. However, the data passed to that function is not the entire dataset but a single record of your CSV. All that being true if and only if you are really using v5, though. Please double check that. If I am in error, I'd be happy to reopen the question. There are other problems indicating a version mismatch. Do you see any errors on the console? – altocumulus Sep 25 '19 at 08:20
  • It is indeed v5.12 to be exact. No console errors apart from icons it can't find (unrelated to this problem). (Beware I didn't write this from 0, I just got this and have to make it work and this is the first time I'm using d3.) So if I understand you correctly the d3.csv function works kind of like a for-loop, iterating through the lines of the csv. So for each line it executes the function and proceeds to the next line. I don't get why this would be a problem though as for each line I just add the path, text etc.? – Jan-Pieter Sep 25 '19 at 08:36

0 Answers0