2

This is my first time to ask StackOverflow - I'm new to D3 and had used v5 for this matter

I have already been searching for days and can't find anything. if there's an existing one please help me directly to an exact answer. thank you so much for the help!

intro: just got a sample data for use:

Wafer,N Rows,Product Yield,Endline Yield,Mid_Yield
7G650,10,91.18%,99.70%,94.27%
7G651,10,88.41%,98.11%,95.54%
7G652,10,92.08%,97.56%,98.58%
7G657,10,87.71%,97.76%,95.77%

first off - before, my code was like below:

<script src="https://d3js.org/d3.v5.min.js"></script>
<script type="text/javascript">
   $(document).ready(function() {
      var yield = d3.csv("http://server/trend/data.csv",
                       function(data, i) {
                          return {
                             waf : data.Wafer,
                             seq : i,
                           yield : +data["Product Yield"].replace(/%/g, "")
                       };
      });
      console.log(yield);
   });
</script>

and when I checked at the console (chrome) - I can see my data. it's just that it needs a promise implementation

enter image description here

so i searched for some solution and here's my code now:

var yield = d3.csv("http://server/trend/data.csv",
                function(data, i) {
                    return {
                         waf : data.Wafer,
                         seq : i,
                       yield : +data["Product Yield"].replace(/%/g, "")
                    };
                 }).then(function(data){
                       console.log(data);
             });

I could still see my filtered data from console.log(data),

enter image description here

but when I query from outside d3.csv using the "yield" variable

console.log(yield);

values are now undefined

enter image description here

so sorry for the trouble, my boss is about to kill me.. i will need this filtered data for my trend, and soon will add a pareto chart.. thanks in advance and more power to stackoverflow -

Dumi
  • 1,414
  • 4
  • 21
  • 41
K4L37
  • 21
  • 1
  • 4
  • You cannot use `yield` as a variable or property name—it's a [keyword](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/yield). – altocumulus Nov 21 '18 at 08:45
  • thanks @Thilina Nakkawita for including my images directly on my question :) – K4L37 Nov 22 '18 at 01:56
  • thanks @altocumulus for this info... i never knew that yield is one of its keywords - – K4L37 Nov 22 '18 at 01:57

1 Answers1

-1

edit: following @altocumulus 's comment

I believe you may be after:

var resultYield;

d3.csv("http://server/trend/data.csv",
  function(data, i) {
    return {
      waf : data.Wafer,
      seq : i,
      yield : +data["Product Yield"].replace(/%/g, "")
    };
  }).then(function(data){
    resultYield = data;
    console.log(resultYield);
  })

re: using yield / return as keys for object literals:

const test = {
  yield: 'yield',
  return : 'return'
}

const getTest = () => ({
  yield: 'getYield',
  return: 'getReturn'
})

const getTest2 = function(){
  return {
    yield: 'getYield2',
    return: 'getReturn2'
  }
}

console.log(test, getTest(), getTest2())
pandamakes
  • 571
  • 3
  • 8
  • Still there is a `yield` in the object literal. – altocumulus Nov 21 '18 at 08:50
  • as a key? I didn't think there was anything wrong with it? – pandamakes Nov 21 '18 at 08:55
  • Good point. Never thought about that since I generally consider using a keyword as an identifier a bad idea. Related: https://mathiasbynens.be/notes/javascript-properties, [*"Rules for unquoted JavaScript Object Literal Keys?"*](/q/9367572). – altocumulus Nov 21 '18 at 08:59
  • ` ECMAScript 3 didn’t allow the use of unquoted reserved words as property names.` I see your point. – pandamakes Nov 21 '18 at 09:02
  • hi @pandamakes, thanks for your answer, i tried your code & changed all yield keyword except for csv-col-title `var resultYield; d3.csv("http://localhost:5001/data.csv", function(data, i) { return { waf : data.Wafer, seq : i, yld : +data["SDPT Yield"].replace(/%/g, "") }; }).then(function(data){ resultYield = data; console.log(resultYield); });` resultYield works inside d3.csv, but not outside still- i need to get this kind of data --- `resultYield = [{ waf: "7G650", seq: 1, yld: 94.27 }]` – K4L37 Nov 21 '18 at 15:16
  • unfortunately, that is the case with a Promise or a callback function. Unless you are interested in looking into [`async/await`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/async_function), you will have to work with [promises](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Using_promises) – pandamakes Nov 21 '18 at 15:34